高级CSS阴影，实现更立体的阴影效果！
时间：2023-03-28 00:55:12
HTML
CSS闃村奖璁╃墿浣撶湅璧锋潵鏇寸珛浣撱€傜劧鑰岋紝鍦ㄦ渶绠€鍗曠殑闃村奖浣跨敤涔嬩笂锛屾垜浠彲浠ュ疄鐜版洿鏈夎叮銆佹洿绔嬩綋鐨勯槾褰辨晥鏋溿€傛湰鏂囧皢鍚戞偍灞曠ず濡備綍浣跨敤CSS瀹炵幇鍑犵姣旀櫘閫氶槾褰辨洿鍏风珛浣撴劅鐨勯槾褰辨晥鏋溿€侰SS闃村奖鍩虹鐭ヨ瘑鍦–SS涓紝鏈?涓睘鎬у彲浠ュ疄鐜版槑浜〃闈㈢殑闃村奖锛歜ox-shadow-boxshadowtext-shadow-鏂囨湰闃村奖filter:drop-shaodw()-shadowsinfilters鍏充簬瀹冧滑鐨勫熀鏈娉曞拰鐢ㄦ硶浣嗘洿澶氱殑鏄弿杩帮紝浣犲彲浠ュ厛鍦∕DN涓婂～杩欓儴鍒嗭紝璐村嚑寮犲浘蹇€熷洖椤句竴涓嬶細box-shadow-boxshadow:text-shadow-textshadow:filter:drop-shaodw()-shadowinthefilter:鍩烘湰涓婏紝涓夌闃村奖鐩镐技銆傞渶瑕佹敞鎰忕殑鏄細box-shadow杩樺尯鍒嗕簡鍐呴槾褰憋紝鐢ㄥ叧閿瓧inset鏉ユ弿杩帮紱box-shadow鏈変竴涓澶栫殑闃村奖鎵╂暎鍗婂緞鍙傛暟銆備笂闈㈡彁鍒扮殑闀挎姇褰辨槸閫氳繃澶氬眰闃村奖鍙犲姞鏉ュ疄鐜版枃瀛楃殑涓夌淮闃村奖銆傚畠涔熷彲浠ョ敤鍦╠iv瀹瑰櫒涓娿€傚綋鐒讹紝杩欓噷杩樻湁涓€涓湁瓒ｇ殑鏂规硶銆傚亣璁炬垜浠湁涓€涓煩褰㈠厓绱狅紝鎯崇粰瀹冩坊鍔犱竴涓暱鎶曞奖锛屽涓嬶細瑕佺敓鎴愯繖涓暱鎶曞奖锛屾垜浠彲浠ュ彔鍔犲垰鎵嶆彁鍒扮殑澶氫釜闃村奖锛岀劧鍚庝娇鐢ㄥ厓绱犵殑涓や釜浼厓绱犮€傚叾瀹炰笂鍥炬槸杩欐牱鐨勶細鍏抽敭鏄垜浠€氳繃涓や釜浼厓绱犵殑鍙樻崲锛歴kew()鍙樻崲锛屼互鍙婅儗鏅壊鐢辩函鑹插彉涓洪€忔槑鑹诧紝瀹炵幇浜嗛暱鎶曞奖鐨勬晥鏋滐細CodePenDemo--绾挎€ф笎鍙樻ā鎷熼暱闃村奖绔嬩綋濂戒簡锛岃鎴戜滑缁х画銆備笅涓€涓富棰樻槸绔嬩綋鎶曞奖銆傝繖涓娉曞緢濂囨€€傞槾褰辩殑鍑虹幇鏄负浜嗚鍘熸湰鐨勫厓绱犵湅璧锋潵鏇存湁绔嬩綋鎰熴€傞偅涔堣繖閲屾墍璋撶殑涓夌淮鎶曞奖鏄竴绉嶆€庢牱鐨勪笁缁存柟娉曞憿锛熻繖閲屾墍璋撶殑绔嬩綋鎶曞奖骞朵笉鏄竴瀹氳鐢╞ox-shadow銆乼ext-shadow鎴杁rop-shadow锛岃€屾槸鎴戜滑鐢ㄥ叾浠栫殑鍏冪礌鎴栧睘鎬ф潵妯℃嫙鍏冪礌鐨勯槾褰便€傝繖鏍峰仛鐨勭洰鐨勬槸涓轰簡绐佺牬box-shadow绛夊厓绱犵殑涓€浜涘畾浣嶉檺鍒躲€備娇闃村奖鐨勪綅缃€佸ぇ灏忓拰妯＄硦鏇村姞鐏垫椿銆傚ソ鍚э紝璁╂垜浠潵鐪嬬湅銆傚浜庤繖鏍蜂竴涓厓绱狅紝鎴戜滑甯屾湜閫氳繃鑷畾涔夐槾褰辩殑浣嶇疆锛屼娇鍏舵洿鍔犵珛浣擄細涓婂浘涓殑div鍙湁涓€涓緢娴呯殑box-shadow锛岀湅涓婂幓涓庝笁缁村害鏃犲叧銆傛帴涓嬫潵锛屾垜浠埄鐢╠iv鐨勪吉鍏冪礌鐢熸垚涓€涓被浼间簬鍘熷浘瑙掑舰鐘剁殑鍥惧舰锛岀劧鍚庨€氳繃transform瀵瑰叾杩涜绉讳綅锛屽彲鑳芥槸杩欐牱鐨勶細OK锛屾渶鍚庡鐢熸垚鐨勫厓绱犺繘琛屼竴浜涜櫄鍖栨晥鏋滀吉鍏冪礌锛坒ilterorbox-shadow锛夛紝鍙互瀹炵幇鍍忚琚挄瑁傜殑涓夌淮鏁堟灉锛氫唬鐮佸緢绠€鍗曪紝浼狢SS浠ｇ爜濡備笅锛歞iv{position:relative;瀹藉害锛?00px锛涢珮搴︼細100px锛涜儗鏅細hsl锛?8銆?00%銆?0%锛夛紱border-radius:20px;}div::before{content:"";浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?%锛涘彸锛?%锛涘簳閮細0锛涜竟鐣屽崐寰勶細10px锛涜儗鏅細hsl锛?8銆?00%銆?0%锛夛紱鍙樻崲锛氬钩绉伙紙0锛?15%锛夋棆杞紙-4deg锛夛紱鍙樻崲鍘熺偣锛氫腑蹇冧腑蹇冿紱box-shadow:0020px15pxhsl(48,100%,20%);}鎵€浠ユ€荤粨涓€涓嬶細绔嬩綋鎶曞奖鐨勫叧閿偣灏辨槸甯姪浼厓绱犵敓鎴愪竴涓拰鐖跺厓绱犲ぇ灏忕浉杩戠殑鍏冪礌鍏冪礌锛岀劧鍚庢棆杞畠锛屽皢瀹冨畾浣嶅埌鍚堥€傜殑浣嶇疆锛岀劧鍚庣粰瀹冨姞涓婇槾褰辨搷浣滈鑹茬殑浣跨敤涔熷緢閲嶈銆傚奖瀛愮殑棰滆壊閫氬父姣斿畠鏈韩鐨勯鑹叉繁銆傝繖閲岀敤hsl鏉ヨ〃绀洪鑹叉瘮杈冩柟渚裤€俵鎺у埗棰滆壊鐨勪寒搴︾瓑寰堝鍦烘櫙锛屽彲浠ョ敤绫讳技鐨勬妧宸у疄鐜帮細璇︾粏瀹屾暣浠ｇ爜鍙互鐐硅繖閲岋細CodePenDemo--StereoscopicProjectionEmbossedShadow鍙︿竴绉嶄笁缁存晥鏋滈槾褰辨槸embossed闃村奖銆傚畠鐨勬湰璐ㄨ繕鏄痓ox-shadow鍜宼ext-shadow锛屽彧鏄渶瑕佹妸棰滆壊鍗忚皟鍜屽唴澶栭槾褰辨帶鍒跺湪涓€璧枫€備娇鐢ㄣ€傛牳蹇冩槸2鐐癸細鑳屾櫙棰滆壊鍜屽唴瀹癸紙鏂囨湰鎴栨棰滆壊锛夊湪涓や釜鐩稿弽鐨勬柟鍚戜笂淇濇寔涓€鑷达紝鐢ㄤ袱缁勫姣旇壊鍊兼潵瀹炵幇鍑瑰嚫鏁堟灉銆傞鍏堟垜浠潵鐪嬩竴涓嬫枃瀛楃増鐨勬诞闆曟晥鏋溿€傞鍏堣瀹炵幇鍑歌捣鐨勬晥鏋滐紝鎴戜滑闇€瑕佸疄鐜颁竴涓儗鏅壊涓庢枃瀛楅鑹茬浉鍚岀殑鏂囧瓧锛?div>Embossedshadow
body{background:#999;}p{color:#999;}鐨勬晥鏋滃涓嬶紝鍥犱负鑳屾櫙棰滆壊鍜屾枃瀛楅鑹蹭竴鏍凤紝鎵€浠ユ垜浠粈涔堜篃鐪嬩笉鍒般€備笉杩囨病鍏崇郴锛屾垜浠湪x鍜寉鏂瑰悜缁欐枃瀛楁坊鍔犱竴涓?px鐨勯粦鑹查槾褰憋細p{color:#999;text-shadow:1px1px1px#000;}鏁堟灉濡備笅锛氭劅瑙夋湁鐐癸紝鐒跺悗鍙嶈浆涓€涓嬶紝灏辨槸-1px鐩稿浜巟鍜寉鏂瑰悜鍔犱竴涓粦鑹诧紝涔熷氨鏄櫧鑹查槾褰憋細p{棰滆壊锛?999锛泃ext-shadow:1px1px1px#000,-1px-1px1px#fff;}鏁堟灉濡備笅锛屾墍浠ユ垜浠緱鍒颁簡涓€涓嚫璧风汗鐞嗙殑娴洉闃村奖锛氬鏋滄垜浠弽杞鑹插憿锛焢{棰滆壊锛?999锛泃ext-shadow:1px1px1px#fff,-1px-1px1px#000;}鍙互杞绘澗寰楀埌鍑圭汗鐞嗙殑娴洉闃村奖锛氫笂闈EMO鐨勫畬鏁翠唬鐮侊細CodePenDemo-EmbossedShadowNeo-mimeticstyleshadowsWewill鎶婃妧宸х敤鍦ㄦ枃瀛椾笂锛屽欢浼稿埌瀹瑰櫒涓婏紝寰楀埌鏈€杩戞祦琛岀殑鎷熸€侀鏍奸槾褰便€傚師鐞嗘槸鐩镐技鐨勩€備袱涓槾褰憋紝浣跨敤涓や釜鐩稿弽鐨勬柟鍚戯紝浣跨敤涓ょ粍瀵规瘮鑹插€硷紝杈惧埌鍑瑰嚫涓嶅钩鐨勬晥鏋溿€備笌鏂囧瓧涓嶅悓鐨勬槸锛屾垜浠繖閲岄渶瑕佸埄鐢ㄦ柟妗嗙殑鍐呴槾褰辨潵瀹炵幇鍑归櫡鐨勬晥鏋溿€?div>娴洉闃村奖
娴洉闃村奖
div{width:120px;楂樺害锛?20px锛涜儗鏅細#e9ecef锛涢鑹诧細#333锛沚ox-shadow:7px7px12pxrgba(0,0,0,.4),-7px-7px12pxrgba(255,255,255,.9);}div:nth-child(2){box-shadow:inset-7px-7px12pxrgba(255,255,255,.9),inset7px7px12pxrgba(0,0,0,.4);}杩欐牱灏卞彲浠ュ緱鍒颁竴涓ā浠块鏍肩殑鎸夐挳锛屽濡備笅鍥撅紝宸﹀嚫鍙冲嚬锛氶€氳繃涓€涓畝鍗曠殑transition锛屽氨鍙互瀹炵幇鏁翠釜鐐瑰嚮浜や簰锛歞iv{transition:.2sall;妗嗛槾褰憋細7px7px12pxrgba(0,0,0,.4),-7px-7px12pxrgba(255,255,255,.9),inset000xrgba(255,255,255,.9),鎻掑叆000rgba(0,0,0,.4);&:active{box-shadow:000rgba(0,0,0,.4),000rgba(255,255,255,.9),inset-7px-7px12pxrgba(255,255,255,.9),inset7px7px12pxrgba(0,0,0,.4);}}鐪嬫晥鏋滐細鏂囧瓧绔嬩綋鎶曞奖/闀块槾褰辩殑涓夌淮鏁堟灉瀵规枃瀛楀畬鍏ㄤ笉閫傜敤锛屾墍浠ユ垜浠渶瑕佸彟杈熻箠寰勬潵澶勭悊鏂囧瓧鐨勪笁缁撮槾褰辨晥鏋溿€傞€氬父锛屾垜浠娇鐢╰ext-shadow鏉ョ敓鎴愭枃瀛楅槾褰憋紝鍍忚繖鏍凤細
TxtShadow
-----div{text-shadow:6px6px3pxhsla(14,100%,30%,1);}寰堝ソ锛屼絾涓嶆槸涓夌淮鐨勩€傞偅涔堣瀹炵幇涓夌淮鏂囧瓧闃村奖锛屾渶甯哥敤鐨勬柟娉曞氨鏄娇鐢ㄥ灞傛枃瀛楅槾褰卞彔鍔犮€俆ips锛氬拰box-shadow涓€鏍凤紝text-shadow鍙互澶氬眰鍙犲姞锛佷絾鏄浜庡崟涓厓绱狅紝drop-shadow鍙兘鏄竴灞傘€傞偅涔堬紝瀵逛簬涓婇潰鐨勬枃瀛楋紝鎴戜滑鏉ヨ瘯璇曟坊鍔?0灞傜殑鏂囧瓧闃村奖銆傚棷锛屾墜鍐?0灞傚叾瀹炲緢蹇珇鍡紝鎵嬪啓鐪熺殑澶參浜嗏€嬧€嬶紝瀹规槗鍑洪敊锛屾墍浠ヨ繖閲岄渶瑕佸€熷姪SASS/LESS鏉ュ啓涓€涓敓鎴?0灞傞槾褰辩殑鍑芥暟銆傚悜鍙冲拰鍚戜笅鍋忕Щ1px浠ョ敓鎴愪竴灞傛枃鏈槾褰憋細@functionmakeLongShadow($color){$val:0px0px$color;@for$i浠?鍒?0{$val:#{$val},#{$i}px#{$i}px#{$color};}@return$val;}div{text-shadow:makeLongShadow(hsl(14,100%,30%));}涓婇潰鐨凷CSS浠ｇ爜銆傜紪璇戝悗浼氱敓鎴愬涓婥SS锛歞iv{text-shadow:0px0px#992400,1px1px#992400,2px2px#992400,3px3px#992400,4px4px#992400,5px5px#992400,6px6px#99,7px7px#992400,8px8px#992400,9px9px#992400,10px10px#992400,11px11px#992400,12px12px#992400,13px13px#992400,14px#992400,15px15px192400,16px16px16PX,17px17px#992400,18px18px#992400,19px19px#992400,20px20px#992400,21px21px#992400,22px22px#992400,23px23px#992400,24px24px#992400,25px25px#992400,26px26px#992400,27px27px#992400,28px28px#992400,29px29px#992400,30px30px#992400,31px31px#992400,32px32px#992400,33px33px#992400,34px34px#992400,35px35px#992400,36px36px#992400,37px37px锛?92400锛?8px38px锛?92400锛?9px39px锛?92400锛?0px40px锛?92400锛?1px41px41px锛?92400锛?2px42px42px42px锛?92400锛?3px43px43px锛?92400#44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px44px#992400,48px48px#992400,49px49px#992400,50px50px#992400;}鐪嬬湅鏁堟灉锛氬棷锛屽緢濂斤紝寰堟湁绔嬩綋鎰燂紝灏辨槸涓戯紝鎬€殑銆傞棶棰樻槸浠€涔堬紵闃村奖瀹為檯涓婃湁浜害鍜岄€忔槑搴︾殑鍙樺寲銆傚洜姝わ紝瀵逛簬姣忎竴灞傛笎鍙樼殑鏂囧瓧闃村奖锛屾槑搴﹀拰閫忔槑搴﹀簲璇ユ槸涓嶆柇鍙樺寲鐨勩€係ASS鍙互寰堝ソ鐨勫疄鐜拌繖涓渶姹傘€傝繖閲屾湁涓や釜SASS棰滆壊鍑芥暟锛歠ade-out鏀瑰彉棰滆壊鐨勯€忔槑搴︼紝浣块鑹叉洿閫忔槑desaturate鏀瑰彉棰滆壊鐨勯ケ鍜屽害鍊硷紝浣块鑹蹭笉閭ｄ箞楗卞拰銆傚叧浜嶴ASS棰滆壊鍑芥暟锛屽彲浠ョ湅杩欓噷锛歋assBasics鈥擟olorFunction鎴戜滑浣跨敤涓婇潰鐨勪袱涓猄ASS棰滆壊鍑芥暟鏉ヤ慨鏀规垜浠殑CSS浠ｇ爜锛屼富瑕佹槸淇敼涓婇潰鐨刴akeLongShadow鍑芥暟鍑芥暟锛欯functionmakelongrightshadow($color){$鍊硷細0px0px$棰滆壊锛汙for$i浠?鍒?0{$color:fade-out(desaturate($color,1%),.02);$val:#{$val},#{$i}px#{$i}px#{$color};}@return$val;}濂戒簡锛岀湅鐪嬫渶缁堟晥鏋滐細濂戒簡锛屽ぇ鍔熷憡鎴愶紝杩欐椤虹溂涓嶅皯~璇︾粏瀹屾暣鐨勪唬鐮佸彲浠ョ偣杩欓噷锛欳odePenDemo鈥斺€斾笁鈥斺€斾笁缁存枃瀛楅槾褰卞綋鐒讹紝浣跨敤CSS鐢熸垚涓夌淮鏂囧瓧闃村奖鐨勬柟娉曡繕鏈夊緢澶氥€傝繖鏄彟涓€涓緥瀛愩€備笁缁存枃瀛楅槾褰辨槸閫氳繃鍦ㄨ儗鏅壊涓婂彔鍔犻€忔槑鑹茬殑澶氶噸绾挎€ф笎鍙樻潵瀹炵幇鐨勩€傛湁鍏磋叮鐨勫悓瀛﹀彲浠ュ幓鐪嬬湅鍏蜂綋鐨勫疄鐜帮細璇︾粏瀹屾暣鐨勪唬鐮侊紝澶у鍙互鎴宠繖閲岋細CodePenDemo鈥斺€斿甫闃村奖鐨勭嚎鎬ф笎鍙樺疄鐜版潯绾瑰拰涓夌淮闃村奖鏉＄汗鏈€鍚庢€荤粨涓€涓嬶紝鏈枃浠嬬粛浜?绉嶄娇鐢ㄦ柟寮廋SS瀹炵幇鏇村鐨勪笁缁撮槾褰辨晥鏋滐紝鍙互甯姪鎴戜滑鏇村ソ鐨勭悊瑙SS闃村奖銆傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
