缁忓父鐪嬪埌CSS缁樺浘鐨勬枃绔狅紝姣斿鐢ㄧ函HTML+CSS鐢诲搯鍟姊︾殑鍥俱€傚疄鐜版柟寮忔槸閫氳繃鍫嗗彔div鏉ヤ竴姝ユ瀹炵幇姣忓紶鍥剧墖銆傝繖涓妧宸ф湰韬病鏈変粈涔堥棶棰橈紝鍙槸闅惧害瑕佸皬涓€浜涖€傚彧瑕佹湁鑰愬績锛屽緢澶氬浘褰㈣繕鏄彲浠ユ參鎱㈠疄鐜扮殑銆傚熀浜嶤SS缁樺浘鐨勯渶姹傦紝閫愭笎鍑虹幇浜嗕竴绉嶆柊鐨勬祦娲撅紝鍗曟爣绛惧浘褰紝鍗充竴涓鏉傜殑鍥惧舰鍙渶瑕佷竴涓爣绛惧氨鍙互瀹屾垚銆傜浉姣旀棤闄愪娇鐢ㄦ爣绛惧拰涓嶆柇鍫嗗彔div锛岄毦搴︽棤鐤戜笂鍗囦簡寰堝锛屽悓鏃朵篃闇€瑕佸CSS鏈夋洿娣辩殑鐞嗚В銆傛瘮濡備笅闈㈣繖寮犲浘锛屽氨鏄敱涓€涓猟iv鍏冪礌瀹屾垚鐨勶紝瀹冩潵婧愪簬ASingleDiv锛氭湰鏂囧皢浠嬬粛涓€浜涘崟鏍囩缁樺埗鐨勬妧宸э紝骞跺埄鐢ㄨ繖浜涙妧宸х敤鍗曟爣绛惧疄鐜颁竴浜涘鏉傜殑鍥惧舰~馃槑浼厓绱犵殑鍚堢悊浣跨敤铏界劧璇存槸鏍囩锛屼絾鍑犱箮鎵€鏈夌敤鍗曚釜鏍囩瀹炵幇鍥炬枃鏍囬鐨勪緥瀛愰兘浣跨敤浜?涓厓绱犮€傝繖鏄崟鏍囩瀹炵幇鍥惧舰鏈€鏍稿績鐨勯儴鍒嗭細闄や簡鎺у埗鍏冪礌鏈韩鐨勬牱寮忓锛屾垜浠繕鏈夊厓绱犵殑涓や釜浼厓绱犫€斺€?:before锛?:after锛屽叾瀹炲氨鏄?涓厓绱犲叏閮ㄧ殑銆傚棷锛屾瘮濡備笅闈㈣繖涓績褰㈠浘褰紝鍙兘鐢ㄤ竴涓猟iv鏉ュ疄鐜帮紝鎬庝箞鍋氾細杩欑涓嶈鍒欑殑鍥惧舰鏈韩浣跨敤绾疌SS灏辨瘮杈冨鏉傦紝涓€鑸鍊熷姪SVG锛屽綋鐒跺湪CSS涓槸浣跨敤鍓緫璺緞銆備笉杩囦粩缁嗙湅鍥撅紝鎴戜滑涓嶉渶瑕乧lip-path锛岃瘯鐫€鎶婂浘鍒嗘垚3閮ㄥ垎锛氬搰锛屽叾瀹炶繖閲岋紝鎴戜滑鍙渶瑕佸厓绱犳湰韬疄鐜颁竴涓鏂瑰舰锛屽拰鐨勪袱涓吉鍏冪礌璇ュ厓绱犱娇鐢ㄧ粷瀵瑰畾浣嶅疄鐜颁袱涓渾鍦堬紝鍙犲姞鍦ㄤ竴璧峰氨鍙互浜嗭紒瀹屾暣鐨勪唬鐮佷篃寰堢畝鍗曪細div{position:relative;鍙樻崲锛氭棆杞紙45搴︼級锛涜儗鏅細RGBA锛?55銆?0銆?47銆?.85锛夛紱瀹藉害锛?40px锛沨eight:140px;}div::before,div::after{content:"";浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?70px锛涘搴︼細140px锛涢珮搴︼細140px锛涜竟鐣屽崐寰勶細50%锛涘湪{椤堕儴锛?70px涔嬪墠锛沴eft:0;}瀹屾暣绀轰緥浠ｇ爜锛屽彲浠ョ偣杩欓噷CodePenDemo--涓€涓猄ignleDivheartShapeGradient&MultipleGradients姣笉澶稿紶鐨勮锛屾笎鍙樺湪鍗曟爣绛惧疄鐜板浘褰腑鐢ㄥ埌浜嗕竴涓狢SS灞炴€с€傚師鍥犳槸鎴戜滑鐨勬笎鍙樺彲浠ユ湁澶氫釜娓愬彉锛佹笎鍙樹笉浠呮槸鍗曚竴鐨勭嚎鎬ф笎鍙樻垨鍗曚竴鐨勫緞鍚戞笎鍙樸€傚浜庤儗鏅紝瀹冩敮鎸佸涓笎鍙樼殑鍙犲姞锛岃繖涓€鐐瑰緢閲嶈銆傚ソ锛屾垜浠潵鐪嬬湅杩欎釜澶瀬鍥撅細鍏跺疄澶瀬鍥炬槸鐢卞涓笉鍚岄鑹茬殑鍦嗗湀缁勬垚鐨勩€傚湪杩欓噷鎶婂涓笉鍚岀殑div鍙犺捣鏉ョ粍鍚堝湪涓€璧疯偗瀹氭槸鍙互鐨勩€備絾鎴戜滑鐨勭洰鏍囨槸鐢ㄤ竴涓爣绛炬潵鍋氥€傚綋鍥惧舰閮芥槸鍦嗗舰鎴栫嚎鏉℃椂锛屽簲鑰冭檻浣跨敤澶氶噸绾挎€э紙寰勫悜锛夋笎鍙樸€傛垜浠彲浠ユ媶瑙ｄ笂鍥俱€傚畠瀹為檯涓婃槸鐢?涓嚎鎬ф笎鍙樺姞4涓緞鍚戞笎鍙樼敓鎴愮殑鍦嗙粍鎴愮殑锛氬洜姝わ紝澶瀬鍥剧殑瀹屾暣浠ｇ爜鍙渶瑕佷竴涓猟iv锛岀敋鑷充笉闇€瑕佷吉鍏冪礌鐨勮緟鍔╋細div{width:200px;楂樺害锛?00px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅浘鍍忥細寰勫悜娓愬彉锛?00012.5px锛岄€忔槑12.5px锛夛紝寰勫悜娓愬彉锛?fff12.5px锛岄€忔槑12.5px锛夛紝寰勫悜娓愬彉锛?fff50px锛岄€忔槑50px锛夛紝寰勫悜娓愬彉锛?00050px,閫忔槑50px),绾挎€ф笎鍙?90deg,#000100px,#fff100px);background-position:center50px,center-50px,center50px,center-50px,00;}瀹屾暣绀轰緥浠ｇ爜锛屽彲浠ユ埑杩欓噷gradients灏辨槸shadowbox-shadow锛宐ox-shadow灞炴€х殑鐗圭偣涔嬩竴涔熸槸鍙互澶氬眰鍙犲姞锛屽彲浠ュ唴缃绉嶉槾褰辫鍒欙紝绠€鐩存槸鍗曟爣绛剧粯鍥剧殑缁堟瀬鏉€鎵嬶紒鎴戜滑灏濊瘯鐢ㄤ竴涓猟iv鏉ュ疄鐜板涓嬪浘褰細涔嶇湅涔嬩笅锛岃繖涓浘褰㈠叾瀹炲緢澶嶆潅锛屼簯褰╁拰闆ㄦ淮閮戒笉鏄爣绛炬垨鑰呬吉鍏冪礌灏辫兘瀹炵幇鐨勩€備簨瀹炰笂锛屽苟闈炲姝ゃ€傞鍏堬紝璁╂垜浠潵鐪嬬湅杩欐湹浜戙€傝櫧鐒跺畠鐨勮疆寤撴槸涓嶈鍒欑殑锛屼絾瀹為檯涓婃槸涓€涓帴涓€涓殑鍦嗗湀銆傞潪甯搁€傚悎浣跨敤澶氫釜寰勫悜娓愬彉鎴栧涓槾褰憋紒鍏跺疄灏辨槸涓€涓渾鐨勫疄鐜帮紝鐒跺悗鍒╃敤闃村奖瀹炵幇澶氫釜鍦嗙殑鍙犲姞銆傜ず渚嬪姩鐢讳竴鐪嬪氨鎳傦細浠ｇ爜閲忓叾瀹炲緢灏戙€傚疄鐜颁竴鏈典簯鐨勪唬鐮侊細div{width:100px;楂樺害锛?00px锛涜儗鏅細#fff;杈圭晫鍗婂緞锛?0%锛沚ox-shadow:120px0px0-10px#fff,95px20px00px#fff,30px30px0-10px#fff,90px-20px00px#fff,40px-40px00px#fff;}CodePenDemo--ASingleDivCloudy绫讳技浜庝簯鐨勭ず渚嬩唬鐮侊紝闆ㄦ淮瀹為檯涓婃槸鍊熷姪澶氫釜闃村奖瀹炵幇鐨勶細div{position:absolute;瀹藉害锛?px锛涢珮搴︼細6px锛涜竟鐣屽崐寰勶細50%锛涘姩鐢伙細rainy_rain0.7s鏃犻檺绾挎€э紱妗嗛槾褰憋細rgba(0,0,0,0)-10px30px,rgba(0,0,0,0)40px40px,rgba(0,0,0,0.3)-50px75px,rgba(0,0),0,0.3)55px50px,rgba(0,0,0,0.3)-18px100px,rgba(0,0,0,0.3)12px95px,rgba(0,0,0,0.3)-31px45px,rgba(0,0,0,0.3)30px35px;}@keyframesrainy_rain{0%{box-shadow:rgba(0,0,0,0)-10px30px,rgba(0,0,0,0)40px40px,rgba(0,0,0,0.3)-50px75px,rgba(0,0,0,0.3)55px50px,rgba(0,0,0,0.3)-18px100px,rgba(0,0,0,0.3)12px95px,rgba(0,0,0,0.3)-31px45px,rgba(0,0,0,0.3)30px35px;}//鐪佺暐閮ㄥ垎闃村奖浣嶇Щ甯у姩鐢讳唬鐮?..100%{box-shadow:rgba(0,0,0,0)-10px120px,rgba(0,0,0,0)40px120px,rgba(0,0,0,0.3)-50px75px,rgba(0,0,0,0.3)55px50px,rgba(0,0,0,0.3)-18px100px,rgba(0,0,0,0.3)12px95px,rgba(0,0,0,0.3)-31px45px,rgba(0,0,0,0.3)30px35px;}}鍏冪礌鏈韩鍜屽厓绱犵殑涓€涓吉鍏冪礌鍒氬垰鐢ㄥ畬锛岀暀涓嬩竴涓吉鍏冪礌灏卞彲浠ュ疄鐜板厓绱犲簳閮ㄧ殑闃村奖鍦堜簡銆傚畬鏁寸殑demo浠ｇ爜鍙互鐐硅繖閲岋細ASignleDivRainy杩欓噷绠€鍗曟€荤粨涓€涓嬶紝鍙互绠€鍗曟€荤粨涓€涓嬶紝鍗曟爣绛惧浘褰紝灏ゅ叾鏄鏉傚浘褰紝寰堝ぇ绋嬪害涓婁緷璧栦簬浠ヤ笂涓夌鎶€鏈紝鍗筹細鍗曟爣绛剧粯鍥撅紝鍏跺疄浣跨敤鍏冪礌鏈韩鍜屽畠鐨勪袱涓吉鍏冪礌::before鍜?:after鍚堢悊浣跨敤澶氶噸娓愬彉鍙犲姞鍚堢悊浣跨敤澶氶噸闃村奖鍙犲姞缁冧範鏉ョ粌涔犱竴涓嬶紝浣跨敤鍗曚釜div瀹炵幇濡備笅缇庨槦鐩剧墝锛氭湁浜嗕笂闈㈢殑閾哄灚锛屽湪浜嬪疄涓婏紝澶氫釜鍦嗗彲浠ヤ娇鐢ㄥ涓緞鍚戞笎鍙樺拰澶氫釜闃村奖锛屼腑闂寸殑鏄熸槦涔熷彲浠ュ緢瀹规槗浣跨敤瀛楃鎴栧壀杈戣矾寰勫疄鐜帮細div{position:absolute;瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細寰勫悜娓愬彉锛堜腑蹇冿紝#0033b020%锛?ce002120%锛?ce002135%,#eee35%,#eee55%,#ce002155%);border-radius:50%;}div::before{content:"鈽?;浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?0%锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱琛岄珮锛?7px锛沠ont-size:55px;}鎴戜滑浼氬緱鍒拌繖鏍蜂竴涓浘褰細鎰熻鍥惧舰娌℃湁閭ｄ箞闂寒浜嗭紝鎴戜滑鍙互缁х画鍦╠iv涓婂彔鍔犱竴浜沴inear-gradient缁欑浘鐗岃〃闈㈠鍔犱竴浜涢珮鍏夛細div{position:absolute;瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細绾挎€ф笎鍙?45deg,rgba(255,255,255,0)35%,rgba(255,255,255,0.4)50%,rgba(255,255,255,0)65%),linear-娓愬彉(-45deg,rgba(255,255,255,0)35%,rgba(255,255,255,0.4)50%,rgba(255,255,255,0)65%),绾挎€ф笎鍙?鍒皉ight,rgba(0,0,0,0)35%,rgba(0,0,0,0.2)50%,rgba(0,0,0,0)65%),绾挎€ф笎鍙橈紙鍒板簳閮紝rgba(0,0,0,0)35%,rgba(0,0,0,0.2)50%,rgba(0,0,0,0)65%),寰勫悜娓愬彉锛堜腑蹇冩き鍦嗭紝#0033b020%锛?ce002120%锛?ce002135%,#eee35%,#eee55%,#ce002155%);border-radius:50%;}div::before{content:"鈽?;浣嶇疆锛氱粷瀵癸紱椤堕儴锛?0%锛涘乏锛?0%锛涜浆鎹細缈昏瘧锛?50%锛?50%锛夛紱琛岄珮锛?7px锛沠ont-size:55px;}OK锛屽彲浠ュ畬缇庡疄鐜帮細瀹屾暣浠ｇ爜鍙互鐐硅繖閲岋細ASignleDivShield涓€涓爣绛惧疄鐜颁竴涓甯︺€傝鎴戜滑鍐嶇湅鐪嬭繖寮犲浘銆備竴涓兌甯﹀浘褰細鐪嬭捣鏉ュ緢澶嶆潅锛屽叾瀹炲氨鏄渾鍦堝拰鍚勭绾挎潯銆備簨瀹炰笂锛屽畠涔熼€傜敤浜庡崟涓爣绛俱€傞潪甯歌€楁椂锛岄渶瑕佺簿缁嗘帶鍒惰儗鏅?鍥惧儚涓瘡涓笎鍙樼殑background-size鍜宐ackground-position锛氶鍏堬紝閫氳繃澶氫釜娓愬彉瀹炵幇鏁翠釜鑳屾櫙缁撴瀯锛歞iv{width:180px;楂樺害锛?20px锛涜竟鐣屽崐寰勶細5px锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙鍚戝彸锛?44410px锛岄€忔槑10px锛夛紝绾挎€ф笎鍙橈紙鍚戝乏锛?44410px锛岄€忔槑10px锛夛紝绾挎€ф笎鍙橈紙135deg锛?44420px锛岄€忔槑20px锛夛紝绾挎€?娓愬彉锛?135deg锛?44420px锛岄€忔槑20px锛夛紝绾挎€ф笎鍙橈紙鍒板簳閮紝閫忔槑35px锛?be097435px锛?be097443px锛?da6a5743px锛?da6a5751px锛?eebc3151px锛?eebc3159px锛?92a25b59px锛?92a25b67px锛?46a7c067px锛?46a7c075px锛岄€忔槑75px锛夛紝绾挎€ф笎鍙橈紙鍒板簳閮紝閫忔槑10px锛?f7f7f710px7锛?f7f7閫忔槑85px锛夛紝绾挎€ф笎鍙橈紙鍒伴《閮紝閫忔槑26px锛?44426px锛夛紝绾挎€ф笎鍙橈紙105deg锛?44470px锛?33370px锛?33373px锛岄€忔槑73px锛夛紝绾挎€ф笎鍙橈紙-105deg锛?44470px,#33370px,#33373px,transparent73px),linear-gradient(totop,#44424px,#77724px,#77726px,#44426px);box-shadow:-4px-4px2pxrgb(000/20%);}寰楀埌濡備笅鍥惧舰锛氶€氳繃鍏朵腑涓€涓吉鍏冪礌锛屼娇鐢╞ox-shadow瀹炵幇纾佸甫涓婄殑姣忎釜鍦嗙偣锛歞iv:after{浣嶇疆锛氱粷瀵癸紱鍐呭锛氣€濃€?瀹藉害锛?px锛涢珮搴︼細5px锛涜儗鏅細#999锛涜竟鐣屽崐寰勶細50%锛涙闃村奖锛?65px00#999,0104px0#999,165px104px0#999,55px101px01px#222,68px98px01px#222,98px98px01px#222,110px0210px51px38px0#444,114px38px0#444,44px46px0#444,58px46px0#444,107px0#444,121px46px0#444,51px53px0#444,114px4,5px0#136px#ccc,114px46px06px#ccc;宸︼細5px锛泃op:5px;}鏈€鍚庡墿涓嬬殑浼厓绱犲疄鐜颁簡纾佸甫鐨勪腑闂撮儴鍒哠tyle:div:before{position:absolute;鍐呭锛氣€濃€?瀹藉害锛?0px锛涢珮搴︼細26px锛涘乏杈硅窛锛?45px锛涘乏锛?0%锛涢《閮細41px锛涜儗鏅壊锛?ccc锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙鍒板簳閮紝#4445px锛岄€忔槑5px锛夛紝绾挎€ф笎鍙橈紙鍒伴《閮紝#4445px锛岄€忔槑5px锛夛紝绾挎€ф笎鍙橈紙鍒板彸渚э紝#44430px锛岄€忔槑30px锛夛紝绾挎€?娓愬彉锛堝悜宸︼紝#44430px锛岄€忔槑30px锛夛紝寰勫悜娓愬彉锛堝渾鍦堝湪10px12px锛?a0522d32px锛岄€忔槑32px锛?border-radius:30px;}杩欐牱灏卞彲浠ユ祦鐣呯殑浣跨敤鍗曚釜label浜嗐€傝婕旂ず鍙栬嚜ASingleDiv銆傚畬鏁翠唬鐮佸彲浠ョ偣杩欓噷锛欳odePenDemo--鍗曚釜DivDisk褰撶劧锛屽崟涓爣绛捐兘瀹炵幇鐨勮繙涓嶆杩欎簺锛岀湅涓嬮潰锛岄兘鍙互鐢ㄤ竴涓猟iv鏉ュ疄鐜帮細閰嶅悎鍏朵粬high-level灞炴€у綋鐒朵笂闈㈢殑缁樺埗杩樻槸姣旇緝甯歌鐨勶紝鍊熷姪浼厓绱狅紝浣跨敤background鍜宐ox-shadow銆傛垜浠篃鍙互灏濊瘯鍦ㄤ竴涓猟iv涓坊鍔爉ix-blend-mode銆乫ilter婊ら暅鍜宮ask閬僵鏉ュ疄鐜颁竴浜涙洿鏈夎叮鐨勬晥鏋溿€傛瘮濡備笅闈㈣繖涓晥鏋滃氨鏄敤div鏉ュ疄鐜板够褰辨晥鏋滐細闄や簡鐢╠iv鏉ュ疄鐜板熀鏈殑鏁堟灉澶栵紝杩樼敤婊ら暅鏉ュ疄鐜颁竴浜涜瀺鍚堟晥鏋溿€傚畬鏁翠唬鐮佸彲浠ョ偣杩欓噷锛欳odePenDemo--ASingleDivGhost鏈€鍚庯紝鍙敤CSS缁樺埗鍗曚釜div寰堟湁鎰忔€濓紝涔熻兘鏇村ソ鐨勯敾鐐糃SS锛岃櫧鐒跺湪鍟嗕笟涓婂彲鑳界敤涓嶅埌锛氾級杩欓噷鎺ㄨ崘鍑犱釜鍗曟爣绛剧粯鍥剧綉绔欙紝澶у鍙互鐪嬬湅骞舵ā浠夸竴涓嬶細ASingleDivMagicCSSCodePen-SingleDiv濂戒簡锛屾湰鏂囧埌姝ょ粨鏉燂紝甯屾湜瀵逛綘鏈夋墍甯姪:)濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
