娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇渚︽帰缁冧範CSS杩樻湁涓€涓瘮杈冩湁瓒ｇ殑鏂规硶锛屽氨鏄彂鎸ヤ綘鐨勬兂璞″姏鐢诲嚭鍚勭鍥炬锛屾瘮濡傜敾涓€鍙細鎬濊€冪殑鐚尗锛烻egmentFaultSifou鐨勫悏绁ョ墿Sifou鐚槸涓€鍙釜鎬х嫭鐗广€佺壒绔嬬嫭琛屻€佺儹鐖辫嚜鐢?>^蠅^<)鐨勭嫭瑙掔尗锛屼篃鏄ぞ鍖虹殑棣栧腑鎵撻奔瀹樸€備篃鍙互鎻愬墠鏌ョ湅瀹屾暣浠ｇ爜CSSsifoucat(runjs.work)鍏跺疄鏈夌偣澶嶆潅銆備笉瑕佹亹鎱屻€傛寜缁撴瀯鍙垎涓哄ご銆佺溂銆佺湁銆佽€炽€侀蓟銆佸彛銆佽鍑犱釜閮ㄥ垎銆傝鎴戜滑鏉ョ湅鐪嬪浣曞疄鐜板畠銆侰SS缁樺浘鎶€宸ф湁寰堝~1.header棣栧厛鏄渶澶栧眰header鐨勫舰鐘讹紝鏄竴涓笉瑙勫垯鐨勬き鍦嗭紝鍙互鐢╞order-radius鏉ュ疄鐜般€傜洿鎺ユ墜鍐欏彲鑳芥湁鐐逛笉鍑嗙‘銆備綘鍙互浣跨敤杩欎釜鍦嗚鐢熸垚宸ュ叿杩涜寰皟https://9elements.github.io/fancy-border-radius鍋囪HTML鏄繖鏍风殑閭ｄ箞锛屼汉鑴哥殑褰㈢姸灏卞彲浠ヨ繖鏍峰疄鐜拌繖鍙尗{瀹藉害锛?00px;楂樺害锛?20px锛涜竟鐣屽崐寰勶細50%50%50%50%/60%60%40%40%锛涜竟妗嗭細3px瀹炲績#222224锛沚ackground:#fef2dc;}鏁堟灉濡備笅鑴镐笂鏈変袱涓渾褰㈠浘妗堬紝閫氳繃缁樺埗涓や釜寰勫悜娓愬彉濡傛灉瀵瑰緞鍚戞笎鍙樹笉鐔熸倝鐨勫彲浠ュ弬鑰冨紶鏂版棴鑰佸笀鐨勮繖绡囨枃绔狅細10涓猟emo渚嬪瓙瀛︿範CSS3radial-gradientradialgradientcat{/**/background:radial-gradient(circleat20px14px,#fff6px,transparent7px),radial-gradient(circleat12px26px,#fff3px,transparent4px)#222224no-repeat;}鏁堟灉濡備笅鍝堝搱锛屾槸涓嶆槸鏈夌偣鍍忓皬瀛╃殑澶村彂锛?.鐪肩潧鎺ヤ笅鏉ョ敾鐪肩潧銆傚彲浠ュ崟鐙娇鐢ㄤ竴涓猯abel锛岀劧鍚庝娇鐢ㄤ袱涓吉鍏冪礌缁樺埗鐪肩潧姣旇緝绠€鍗曘€傚甫杈规鐨勫渾锛岃竟妗嗗彲浠ョ敤border鎴栬€卋ox-shadow鐢熸垚锛岀劧鍚庨€氳繃缁濆瀹氫綅eye::before,eye::after{position:absolute;鍐呭锛?';瀹藉害锛?0px锛涢珮搴︼細50px锛涜儗鏅細#222224锛涙闃村奖锛?0010px#967c51锛沚order-radius:50%;}eye::before{left:60px;涓婏細100px;}eye::after{鍙筹細110px;110px;}鏁堟灉濡備笅鐜板湪鏈夌偣鍌伙紝闇€瑕佸姞鐐归珮鍏夛紝鍜屼箣鍓嶄竴鏍凤紝鐢讳袱涓緞鍚戞笎鍙樼殑鐧借壊鍦嗗湀灏辫浜唀ye::before,eye::after{/**/background:radial-gradient(circleat20px14px,#fff6px,transparent7px),radial-gradient(circleat12px26px,#fff3px,transparent4px)#222224no-repeat;}鏁堟灉濡備笅锛屽姞楂樹寒浼氶┈涓婁笉涓€鏍蜂簡锛屼寒浜嗕笁涓紝鐪夋瘺锛屽啀缁欑溂鐫涘姞鐐圭湁姣涖€傚乏鍙充袱杈圭殑鐪夋瘺鏄笁閬撶櫧鑹茬殑寮х嚎銆傚渾寮у彲浠ョ敤border-radius鍔燽order鐢伙紝骞朵笖鍙繚鎸佷竴涓柟鍚戠殑border銆傚師鐞嗘槸杩欐牱鐨勩€備竴涓厓绱犲彧鑳界敾涓€涓繖鏍风殑鍦嗗姬锛屽啀鍔犱笂浼厓绱犲彧鑳界敾涓変釜锛屾墍浠ヨ繖閲岀敤浜嗕袱涓爣绛?cat>鐒跺悗鐢ㄤ吉鍏冪礌鏃嬭浆璋冩暣eyebrow-l,eyebrow-r{position:absolute;瀹藉害锛?0px锛涢珮搴︼細10px锛涜竟鐣屽崐寰勶細100%锛涜竟妗嗭細2px婧惰兌缂栧彿#fff锛沚order-width:2px000;}eyebrow-l{left:80px;椤堕儴锛?0px锛涘彉鎹細鏃嬭浆锛?0搴︼級锛泒鐪夋瘺-r{鍙筹細130px锛涢《閮細60px锛涘彉鎹細鏃嬭浆锛?35deg锛夛紱}鐪夋瘺-l::涔嬪墠锛岀湁姣?l::涔嬪悗锛岀湁姣?r::涔嬪墠锛岀湁姣?r::涔嬪悗{鍐呭锛?';浣嶇疆锛氱粷瀵癸紱瀹藉害锛?0px锛涢珮搴︼細10px锛涘彸锛?锛涜竟鐣屽崐寰勶細100%锛涜竟妗嗭細2px瀹炲績#fff锛涜竟妗嗗搴︼細2px000锛泃ransform-origin:rightcenter;}eyebrow-l::before{椤堕儴锛?10px;transform:rotate(20deg);}eyebrow-l::after{椤堕儴锛?0px;鍙樻崲锛氭棆杞紙-15搴︼級锛泒鐪夋瘺-r::涔嬪墠锛岀湁姣?r::涔嬪悗{宸︼細0锛涘彸锛氳嚜鍔紱transform-origin:leftcenter;}eyebrow-r::before{椤堕儴锛?10px;鍙樻崲锛氭棆杞紙-20deg锛夛紱}eyebrow-r::after{top:10px;瀵逛簡~4.鐜板湪缁欒€虫湹鍔犱笂鑰虫湹銆傝繖鏄浉瀵瑰鏄撶殑銆傞鍏堬紝浣跨敤border-radius鐢熸垚宸ュ叿灏嗗叾璋冩暣涓哄集鏇茬殑涓夎褰€傚湪涓嬮潰鐨凥TML涓紝闇€瑕佹坊鍔犱竴涓爣绛?cat>鑰虫湹鐨勮疆寤撳彲浠ョ敾鍑轰笉鍚岀殑杈规锛屽涓媏ar::before{position:absolute;鍐呭锛?';瀹藉害锛?20px锛涢珮搴︼細200px锛涘乏锛?20px锛涢《閮細-50px锛涜竟鐣屽崐寰勶細79%21%0%100%/100%56%44%0%锛涜儗鏅壊锛?9e5439锛涘彉鎹細鏃嬭浆锛?36deg锛夛紱杈规锛?0px瀹炲績#222224锛涜竟妗嗗搴︼細5px30px010px锛泎-index:-1;}鏁堟灉濡備笅鐜板湪鑰虫湹鍙湁涓€绉嶉鑹诧紝娌℃湁灞傛鎰燂紝鍙互鍒╃敤鍐呴槾褰辩敓鎴恊ar::before{/**/box-shadow:inset-40px-10px0#b68679,inset-110px-80px0#b06648;}杩欐牱灏卞彲浠ュ緱鍒版湁灞傛鎰熺殑鑰虫湹銆傚彸杈圭殑鑰虫湹涔熸槸涓€鏍风殑鏂规硶锛屽彲浠ョ敤::after鐢熸垚锛屼唬鐮佷笉鍐嶉噸澶嶏紝鏁堟灉濡備笅鏈変簡鑰虫湹锛屾槸涓嶆槸鏈夌偣鍍忕尗锛?.榧诲瓙鎺ヤ笅鏉ユ槸榧诲瓙銆傞蓟瀛愬彲瑙嗕负鍗婃き鍦嗗舰鍜屽渾涓夎褰€侶TML濡備笅锛屽彧闇€瑕佷竴涓爣绛俱€?鐚?<鐪肩潧>鍗婃き鍦嗗彲浠ラ€氳繃border-radius鏉ュ疄鐜般€傛敞鎰忛蓟瀛愪笂鐨勯珮鍏夈€傚渾瑙掍笁瑙掑舰鍙互閫氳繃灏嗗渾瑙掔煩褰㈡棆杞?5deg锛岀劧鍚庢按骞崇缉鏀惧緱鍒般€傚渾瑙掍笁瑙掑舰鐨勭粯鍒惰繃绋嬪涓嬪叿浣撳疄鐜板涓媙ose{p浣嶇疆锛氱粷瀵癸紱宸︼細140px锛涢《閮細140px锛涘彉鎹細鏃嬭浆锛?deg锛夛紱杩囨护鍣細闃村奖锛?2px#b68679锛夛紱瀹藉害锛?6px锛涢珮搴︼細22px锛涜竟鐣屽崐寰勶細50%50%50%50%/80%80%20%20%锛涜儗鏅細寰勫悜娓愬彉锛?px4pxat60%50%,rgba(255,255,255,0.5)100%,transparent0)#fcbaa1no-repeat;z-index:1;}nose::after{鍐呭锛?';浣嶇疆锛氱粷瀵癸紱瀹藉害锛?4px锛涢珮搴︼細24px锛涜竟鐣屽崐寰勶細5px锛涜儗鏅細绾挎€ф笎鍙橈紙135deg锛岄€忔槑50%锛?fcbaa10锛夛紱锛氱缉鏀撅紙0.8,1锛夋棆杞紙45搴︼級锛涘乏锛?0px锛涘簳閮細-6px锛泎-index:-1;}杩欐牱灏卞緱鍒颁簡涓€涓皬宸х幉鐝戠殑榧诲瓙~6.鍢村反鍢村反鍏跺疄灏辨槸鍑犱釜寮у害锛屽拰鍓嶉潰鐢荤湁姣涚殑鏂规硶绫讳技銆傚畠鏄€氳繃娣诲姞border-radius鍜宐order缁樺埗鐨勩€傜敱浜庡集鏇插害澶э紝鍙互淇濈暀涓や釜鏂瑰悜鐨勮竟鐣屻€傜粯鍒惰繃绋嬪涓嬶紝鎵€浠ュ彧闇€瑕佷竴涓猯abel锛岀劧鍚庣敤涓や釜浼厓绱犵粯鍒跺槾宸?cat><榧诲瓙>鍏蜂綋瀹炵幇濡備笅horn{position:absolute;瀹藉害锛?0px锛涢珮搴︼細120px锛涜竟鐣屽崐寰勶細52%48%50%50%/93%93%7%7%锛涜儗鏅細#808087锛涙闃村奖锛氭彃鍥?0px-14px0-10px#808087锛屾彃鍥?4px-14px0-14px#b6b8be锛?65px;椤堕儴锛?110px锛涘彉鎹㈠師鐐癸細涓績搴曢儴锛涘彉鎹細鏃嬭浆锛?20搴︼級锛泒鍠囧彮::涔嬪墠{鍐呭锛?'锛涗綅缃細缁濆锛涙彃鍥撅細0锛涜竟鐣屽崐寰勶細52%48%50%50%/93%93%7%7%锛涜儗鏅細閲嶅寰勫悜娓愬彉锛堝渾鍦堝湪36px0px锛?b6b8be30px34px锛岄€忔槑35px61px锛夛紝閲嶅寰勫悜娓愬彉锛堝渾鍦堝湪36px0px锛?80808734pxpx38px锛?5px锛?}horn::after{content:'';浣嶇疆锛氱粷瀵癸紱搴曢儴锛?25px锛涘彉鎹細鏃嬭浆锛?0搴︼級锛涘搴︼細12px锛涢珮搴︼細4px锛涜竟鐣屽崐寰勶細4px锛涜儗鏅鑹诧細#f6f090锛涚洅瀛愰槾褰憋細18px00#d56564锛?18px00#a2a9a6;}瀹屾垚锛佸畬鏁寸殑浠ｇ爜鍙互鍦╟sssifoucat(runjs.work)涓壘鍒?.缁间笂鎵€杩帮紝鏈枃缁樺埗鐨勬晥鏋滀笌鍘熷浘骞朵笉瀹屽叏涓€鑷淬€傚緢澶氬湴鏂规敼浜嗭紝涓昏鏄師鍥炬槸鎵嬬粯鐨勶紝瀵规瘮浜嗗緢澶氱嚎鏉°€傞殢鎰忥紝灏ゅ叾鏄ご涓婄殑瑙掋€傛兂浜嗗緢涔咃紝绠€鍖栨垚浜嗘湰鏂囩殑鏁堟灉銆備笅闈㈡槸瀹樻柟鍘熷浘銆傜劧鑰岋紝鏁翠綋琛ㄨ揪浠嶇劧鏈?0-90%鐨勭浉浼煎害銆備笉瑙勫垯妞渾鍙互鑰冭檻border-radius锛屽彲瑙嗗寲鐢熸垚宸ュ叿鍙互杞绘澗瀹屾垚鍦嗗姬銆俠order-radius鍙互涓庨儴鍒嗚竟妗嗙粨鍚堜娇鐢ㄦ潵鐢熸垚鍦嗗舰楂樹寒鑳屾櫙銆俁adial-gradient鍙互鐢ㄦ潵鐢讳晶闈㈤珮鍏夛紝涔熷彲浠ョ敤鍐呴槾褰便€傝瀹炵幇鍦嗚涓夎褰紝鍙互閫氳繃鏃嬭浆鍦嗚鐭╁舰寰楀埌鐩稿悓鐨勫舰鐘躲€傛偍鍙互浣跨敤box-shadow鐢熸垚澶氫釜鍓湰銆傚彲浠ョ伒娲昏繍鐢ㄥ悇绉嶇粯鍥炬妧宸с€傚綋鐒讹紝鍦ㄥ疄闄呭伐浣滀腑锛屾垜涓嶅缓璁敾杩欎箞澶嶆潅鐨勫浘褰€備富瑕佹槸鐞嗚ВCSS缁樺浘銆傜浉鍏虫妧宸э紝婊¤冻涓€浜涚畝鍗曠殑鍥炬爣锛岃嚜閫傚簲澶у皬锛屽彲鍙橀鑹插浘褰㈢话缁版湁浣欐渶鍚庯紝濡傛灉浣犺寰楄繕涓嶉敊锛屽鏋滃浣犳湁甯姪锛岃鐐硅禐锛屾敹钘忥紝杞彂鉂も潳鉂ゆ杩庡叧娉ㄦ垜鐨勫叕浼楀彿锛氬墠绔ぇ渚︽帰鏈枃鍙傚姞浜?024绋嬪簭鍛樿妭锛屾杩庢鍦ㄩ槄璇荤殑浣犲姞鍏ャ€?/p>
