鐜板湪鎵佸钩鍖栬璁￠鏍肩浉褰撴祦琛岋紝鍦ㄥ悇涓湴鏂归兘鑳界湅鍒帮紝鑰岄暱褰憋紙LongShadow锛夋槸鎵佸钩鍖栬璁′腑鐨勪竴涓噸瑕佹蹇碉紝闀垮奖鏄粈涔堟剰鎬濋槾褰辨槸浠€涔堟剰鎬濓紵浣庡ご鐪嬮暱闀跨殑褰卞瓙闀块暱鐨勫奖瀛愬疄闄呬笂寤朵几浜嗙墿浣撶殑鎶曞奖銆傛劅瑙夊氨鍍忕伅鍏変笅鐨勫奖瀛愩€傞€氬父浣跨敤45搴﹁鐨勬姇褰辨潵澧炲姞鐗╀綋鐨勭珛浣撴劅銆傞暱闃村奖姝ｅ湪杩呴€熷彂灞曟垚涓轰竴绉嶆祦琛岀殑璁捐瓒嬪娍锛屽苟涓旂粡甯稿簲鐢ㄤ簬骞抽潰璁捐鏂规涓殑瀵硅薄銆傝繖涔堟兂锛氫粖澶╂垜浠氨鐢⊿ASS鏉ュ疄鐜扮被浼肩殑闀块槾褰辨晥鏋溿€傛垜浠互鐧诲綍椤甸潰涓轰緥銆傛坊鍔犱箣鍓嶏紝杩欐槸瀹炵幇鏂规硶銆傝瀹炵幇闀块槾褰辨晥鏋滐紝鎴戜滑棣栧厛闇€瑕佸垱寤轰竴涓嚱鏁?**闀块槾褰卞疄鐜板嚱鏁帮細longshadow*$color:棰滆壊鍊?$opacity:閫忔槑搴?$stepnum:鎶曞奖闀垮害*$stepLength:娓愬彉姝ラ暱榛樿涓?*/@functionlongshadow($color,$opacity,$stepnum,$stepLength:1){$gradient_steps:null;//璁＄畻姝ユ暟$steps:floor($stepnum/$stepLength);@for$ifrom0through$steps{//璁剧疆閫忔槑搴?op:$opacity-$i/$steps;//璁剧疆棰滆壊$colour_mix:rgba($color,$op);$鍒嗛殧绗︼細绌猴紱//涓鸿繛鎺ユ坊鍔犻€楀彿@if($i!=$steps){$seperator:#{','};}//鎷兼帴box-shadow璇彞锛屼緥瀛愶細1px1pxrgba(0,0,0,1),...$gradient_steps:append(#{$gradient_steps},#{$i*$stepLength}px#{$i*$stepLength}px$colour_mix$seperator);}//鎷兼帴璇彞杩斿洖@return$gradient_steps;}鍒涘缓鍑芥暟鍚庯紝鎴戜滑涓虹櫥褰曟璁剧疆box-shadow灞炴€э紝骞惰皟鐢ㄤ笂闈㈢殑鏂规硶銆俽g{鑳屾櫙锛?fff;鏂囨湰-鈥嬧€嬪榻愶細灞呬腑锛涜竟鐣屽崐寰勶細5px锛沺adding:20px;//璋冪敤鏂规硶box-shadow:longshadow(#dbe3f5,.5,300);}杩欐牱涓€涓畝鍗曠殑闀块槾褰辨晥鏋滄晥鏋滃氨鍑烘潵浜嗘垜浠彲浠ヤ紶鍏ヤ笉鍚岀殑棰滆壊锛岄€忔槑搴︼紝闃村奖鐨勯暱搴︼紝涓€绾ф笎鍙榖ox-shadow鐨勬闀匡細longshadow(rgb(203,203,203),.5,300,20);鏈€鍚庣殑鏁堟灉鏄繖鏍风殑馃檶濂戒簡锛屼互涓婂氨鏄垜杩欐鍒嗕韩鐨勫叏閮ㄥ唴瀹癸紝濡傛灉瑙夊緱鎴戠殑鏂囩珷瀵逛綘鏈夊府鍔╋紝璇蜂笉瑕佸悵鍟綘鐨勭偣璧烉煈嶅摝锛岄樋闂▇
