CSS鎶€宸у拰绐嶉棬|浣跨敤drop-shadow瀹炵幇绾挎潯鍏夊奖鏁堟灉鐐叿鐨勫厜褰辨晥鏋滐紝搴旂敤浜庡悇绉嶄笉鍚岀殑鍦烘櫙銆傞€氳繃鏈枃锛屾偍鍙互浜嗚В鍒帮細濡備綍浣跨敤filter:drop-shadow()缁欓儴鍒嗗厓绱犳坊鍔犲崟闃村奖鍜屽闃村奖锛屼互鍙婁娇鐢ㄥ闃村奖瀹炵幇Neon鏁堟灉鐨凥TML鍏冪礌甯ilter:drop-shadow()鍜孲VGelementsfilter:drop-shadow()浜х敓鐨勫厜褰辨晥鏋滀娇鐢╓ebGL瀹炵幇绾挎潯鍏夊奖Neon鍔ㄧ敾銆傛煇澶╁湪娴忚CodePen鏃讹紝鍙戠幇浜嗕竴涓潪甯告湁瓒ｇ殑浣跨敤WebGL瀹炵幇鐨勭嚎鏉″厜褰辨晥鏋溾€斺€擭EONLOVE锛岄潪甯告湁瓒ｏ細涓嶈繃鐢变簬婧愮爜鏄娇鐢╓ebGL瀹屾垚鐨勶紝鐢昏繖涔堢畝鍗曠殑鏁堟灉锛岄€氳繃浠ｇ爜姣斿GLSLshaders锛屾帴杩?00琛屻€傞偅涔堬紝鎴戜滑鏄惁鍙互浣跨敤HTML(SVG)+CSS鏉ュ疄鐜板憿锛熶娇鐢╠rop-shadow涓哄厓绱犵殑涓€閮ㄥ垎娣诲姞鍗曚釜鍜屽涓槾褰便€傞鍏堬紝瑕佸疄鐜颁笂闈㈢殑鏁堟灉锛屽緢閲嶈鐨勪竴姝ュ氨鏄粰閮ㄥ垎鍏冪礌娣诲姞闃村奖銆傚亣璁炬垜浠湁杩欐牱涓€涓浘褰細
鎴戜滑涓鸿繖涓猟iv鍥惧舰璁剧疆浜哹order-radius:50%锛屽苟娣诲姞浜嗕竴涓猙order-top:div{width:200px;楂樺害锛?00px锛沚order-top:5pxsolid#000;border-radius:50%;}缁撴灉濡備笅锛氬鏋滄垜鍙兂缁欒繖涓渾寮у姞涓婇槾褰憋紝璇曡瘯鐢╞ox-shadow:div{width:200px;楂樺害锛?00px锛沚order-top:5pxsolid#000;杈圭晫鍗婂緞锛?0%锛?box-shadow:005px#000;}emm锛屾樉鐒舵槸涓嶈鐨勶紝闃村奖浼氬姞鍦ㄦ暣涓猟iv涓婏細涓轰簡瑙ｅ喅杩欑鎯呭喌锛岃仾鏄庣殑鍚屽椹笂灏变細鎯冲埌filter:drop-shadow()涓鸿В鍐宠繖涓棶棰樿€岀敓锛宐ox-shadow灞炴€у湪鍏冪礌鐨勬暣涓鍚庨潰鍒涘缓涓€涓煩褰㈤槾褰憋紝鑰宒rop-shadow()杩囨护鍣ㄥ垱寤轰竴涓鍚堝浘鍍忔湰韬紙alpha閫氶亾锛夊舰鐘剁殑闃村奖銆傚ソ鐨勶紝璁╂垜浠敤drop-shadow()鏇挎崲box-shadow:div{width:200px;楂樺害锛?00px锛沚order-top:5pxsolid#000;杈圭晫鍗婂緞锛?0%锛?妗嗛槾褰憋細005px#000锛?filter:drop-shadow(005px#000);}杩欐牱鎴戜滑灏卞彲浠ュ緱鍒颁竴涓鍚堝浘鍍忔湰韬舰鐘剁殑闃村奖锛坅lpha閫氶亾锛夛細鑰屼笖drop-shadow()杩樺彲浠ヤ綔鐢ㄥ湪涓€涓猧mage澶氭瀹炵幇绫讳技shadows鐨凪ultipleshadow鏁堟灉锛歞iv{...filter:drop-shadow(002px#000)drop-shadow(005px#000)drop-shadow(0010px#000)drop-shadow(0020px#000);}鎴戜滑浼氬緱鍒板浘妗堝彲瑙侀儴鍒嗙殑澶氶噸闃村奖鍙犲姞鏁堟灉锛氭垜浠彲浠ユ妸涓婇潰渚嬪瓙鐨勯粦鐧介鑹茶皟鎹竴涓嬶紝寰楀埌涓€涓緢鏈夎壓鏈劅鐨勫浘妗堬紝灏卞儚鐪嬫煇绫婚€忓厜琛屾槦锛欳odePenDemo鈥斺€斿鎶曞奖Neon瀹炵幇蹇冨舰绾挎潯鍔ㄧ敾鎺ヤ笅鏉ュ氨鏄疄鐜板績褰㈢嚎鏉″姩鐢伙紝浣跨敤SVG姣旇緝绠€鍗曘€傚叧浜嶴VG绾挎潯鍔ㄧ敾锛屼箣鍓嶅凡缁忓娆℃彁鍒般€傛湁鍏磋叮鐨勫悓瀛︿篃鍙互鐪嬬湅杩欎袱绡囪鏂囷細銆怶eb鍔ㄧ敾銆慡VG绾挎潯鍔ㄧ敾浠嬬粛銆怶eb鍔ㄧ敾銆慡VG瀹炵幇澶嶆潅绾挎潯鍔ㄧ敾銆傛垜浠鍏堥渶瑕佸緱鍒颁竴涓猄VG