娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇渚︽帰鍦ㄩ」鐩腑缁忓父浼氶亣鍒伴渶瑕佺浉閭婚鑹茬殑鍦烘櫙锛屾瘮濡傝涓€涓鑹插彉娣憋紙鍙樻祬锛夛紝涓嬮潰鏄€夊瀷涓€涓寜閽鏋滅姸鎬佹湁棰滆壊锛屽畾涔変竴涓彉閲忋€傛瘡娆￠兘瑕佺淮鎶ゅ涓鑹插彉閲忥紝澶夯鐑︿簡銆傛湁娌℃湁鍔炴硶鍙敤涓€绉嶉鑹叉潵鍋氾紵鍗冲浣曚娇棰滆壊鍙樻祬锛熻繖鏍峰仛鐨勫ソ澶勬槸锛屽鏋滈渶瑕佹敼鍙樹富棰橀鑹诧紝鍙渶瑕佷慨鏀逛竴涓彉閲忓嵆鍙€備笅闈㈢洏鐐逛竴涓嬫垜鐢ㄨ繃鐨勪竴浜涙柟娉曘€?.閫忔槑搴﹁繖搴旇鏄渶瀹规槗鎯冲埌鐨勩€傞檷浣庡厓绱犵殑閫忔槑搴︿笉浼氫娇棰滆壊鍙樻祬鍚楋紵鍋囪HTML鏄繖鏍风殑锛堜笅鍚岋級#3981E6浣嗘槸杩欑鏂瑰紡闇€瑕佸崟鐙殑涓€灞傛爣绛撅紝涓€鑸彲浠ョ敤pseudo鐢熸垚-elements锛屽叧閿疄鐜板涓媌utton::before{content:'';鑳屾櫙锛歷ar(--primary-color);opacity:0.2}鏁堟灉杩樻槸寰堜笉閿欑殑锛屼笅闈㈡槸鍚勭涓婚鑹茬殑鏁堟灉锛屼絾鏄繖涓柟娉曚篃鏈夊眬闄愭€э紝姣斿浼厓绱犱笉澶熺敤鎬庝箞鍔烇紵缁濆瀹氫綅瀵艰嚧鐨勫眰娆￠棶棰樹笉瑕佺揣锛岃繕鏈夊叾浠栧姙娉曪紝鍐嶅線涓嬬湅銆?.澶氶噸鑳屾櫙銆傚ぇ瀹跺彲鑳界煡閬擄紝CSS3鑳屾櫙鏀寔澶氱鑳屾櫙锛岃€屼笖绾у埆瓒婃潵瓒婁綆銆傚洜姝わ紝鎴戜滑鍙互鍦ㄤ富棰樿壊涓婅挋涓婁竴灞傚崐閫忔槑鐨勭櫧鑹诧紝鍘熸潵鐨勯鑹蹭粛鐒跺彲浠モ€滄贰鍖栤€濄€傜敱浜庤繖鏄儗鏅浘鍍忥紝鍥犳浣跨敤娓愬彉浠ｆ浛棰滆壊銆傛瘮濡備綘鎯宠涓婚鑹叉湰韬彉浜?0%锛屽彲浠ョ敤80%鐨勯€忔槑搴﹁鐩栫櫧鑹诧紝瀹炵幇濡備笅鎸夐挳{background:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),/*halfTransparentwhite*/linear-gradient(var(--primary-color),var(--primary-color));}杩欐牱灏变笉闇€瑕佷娇鐢ㄩ澶栫殑鏍囩鎴栬€呬吉鍏冪礌銆傛晥鏋滃涓嬶紝浣嗘槸杩欑鏂规硶涔熸湁涓€浜涚己闄枫€備緥濡傦紝瀹冨彧閫傜敤浜庤儗鏅眰銆傚鏋滀綘鎯宠box-shadow銆乷utline绛夛紝閭ｆ槸琛屼笉閫氱殑銆傝繖浜涘睘鎬т笉鑳戒笌澶氬眰鑳屾櫙鍙犲姞銆?.鍔ㄧ敾鐨勬柟娉曞湪涔嬪墠鐨勬枃绔犱腑鏈夎缁嗕粙缁嶏細浣跨敤CSS鍔ㄧ敾瀹炵幇棰滆壊鍔犳繁銆佹贰鍖栫瓑娣峰悎鎿嶄綔鐨勪富瑕佸師鐞嗘槸鍔ㄧ敾鎾斁娆℃暟涔熸敮鎸佸皬鏁帮紝姣斿璁剧疆涓€涓姩鐢讳粠钃濊壊寮€濮媡owhite锛屽鏋滄挱鏀炬鏁颁负0.8锛岄偅涔堜細鍦ㄦ挱鏀惧埌80%鏃跺仠姝紝杩欐牱灏卞緱鍒颁簡棰滆壊娣″寲鐨勬晥鏋溿€傚叿浣撳疄鐜板涓媌utton{animation:lighterBackgroundColor.001s0.8linearforwards;/*鎾斁娆℃暟涓?.8*/}@keyframeslighterBackgroundColor{from{background-color:var(--primary-color)}to{background-color:#fff}}鏁堟灉涔熷緢妫掋€備笌浠ュ墠鐨勬柟娉曠浉姣旓紝娌℃湁鑳屾櫙闄愬埗銆備换浣曞睘鎬ч兘鍙互锛屼絾鏄瘡娆″嚭鐜颁竴涓睘鎬э紝閮介渶瑕佷竴涓崟鐙殑鍔ㄧ敾锛堝洜涓哄姩鐢绘敼鍙樹簡灞炴€ф湰韬級銆傚鏋滀綘鎯虫坊鍔犱竴涓彉浜殑杞粨棰滆壊锛屼綘搴旇瀹炵幇button{animation:lighterBackgroundColor.001s0.8linearforwards,lighterOutlineColor.001s0.8linearforwards;/*outline*//*鎾斁鏃堕棿涓?.8*/}@keyframeslighterBackgroundColor{from{background-color:var(--primary-color)}to{background-color:#fff}}/*璁剧疆杞粨鍔ㄧ敾*/@keyframeslighterOutlineColor{from{outline-color:var(--primary-color)}to{outline-color:#fff}}澶夯鐑︿簡锛屾瘺甯冩湁娌℃湁鏇寸畝鍗曠殑鏂规硶锛?.鑷畾涔夊睘鎬у姩鐢讳笂闈㈢敤灞炴€у仛鍔ㄧ敾鏈夌偣娴垂锛屽洜涓哄彉鍖栫殑鍊奸兘鏄竴鏍风殑銆傛湁娌℃湁鍔炴硶閲嶇敤瀹冿紵褰撶劧锛屼娇鐢–SS鍙橀噺浣滀负鍔ㄧ敾瀵硅薄锛屾瘮濡?-lighterColorbutton{animation:lighter棰滆壊.001s0.8绾挎€у悜鍓嶏紱/*Playbacks0.8*/}@keyframeslighterColor{from{--lighterColor:var(--primary-color)}to{--lighterColor:#fff}}浣嗘槸锛屼粎浠呰繖鏍疯繕涓嶅锛屽姩鐢讳笉鐭ラ亾杩欐牱鐨勫彉閲忥紝灏嗗畬鍏ㄦ病鏈夊姩鐢伙紙灏卞儚display涓€鏍凤級涓轰簡璁╄嚜瀹氫箟鍙橀噺涔熸敮鎸佸姩鐢伙紝闇€瑕侀€氳繃@property瀹氫箟@property-CSS:CascadingStyleSheets|MDN(mozilla.org)@property--lighterColor{syntax:'';缁ф壙锛氬亣鐨勶紱initial-value:#fff;}鍜屽墠闈㈢殑鏂规硶鐩告瘮锛屼絾鏄€傜敤鎬ф洿濂斤紝--lighterColor宸茬粡鏄竴涓嚜鍙橀噺锛屽彲浠ョ敤鍦ㄤ换浣曞睘鎬т笂锛屾瘮濡傛坊鍔犱竴涓猳utlinebutton{background-color:var(--鎵撶伀鏈洪鑹诧級锛沷utline:4pxsolidvar(--lighterColor);}鍙互鐪嬪埌outline涔熷緢瀹规槗瀹炵幇棰滆壊娣″寲鐨勭己鐐癸紝鍗冲吋瀹规€т笉濂姐€傜洰鍓峟irefox涓嶆敮鎸併€?.color-mix()鏈€鍚庝粙缁嶄竴涓畼鏂规敮鎸佺殑娣疯壊鍑芥暟锛圕hrome110+锛夛細color-mix()鏄畼鏂圭殑瑙ｅ喅鏂规銆傚鏋滆繖涓槸鏅亶鏀寔鐨勶紝鍓嶉潰鐨勬柟娉曢兘鍙互鐢ㄣ€傜畝鍗曚粙缁嶄竴涓媍olor-mix(inlch,peru40%,lightgoldenrod);棰滆壊娣峰悎锛堝湪srgb涓紝#34c9eb20%锛岀櫧鑹诧級锛沴ch涓墠闈㈢殑鎰忔€濇槸Colorspace锛屾垜浠竴鑸彧鐢╯rgb灏卞浜嗭紝鍚庨潰涓ょ棰滆壊闇€瑕佹贩鑹茶繖閲岀殑鐧惧垎姣旀槸娣峰悎姣斻€傚鏋滄垜浠兂娣″寲80%鐨勬搷浣滐紝鎴戜滑鍙互灏嗕富棰樿壊鐨勬瘮渚嬭缃负20%锛岀櫧鑹蹭細鑷姩濉厖鍓╀綑鐨勬瘮渚嬶紝濡備笅button{--lighterColor:color-mix(insrgb,var(--primary-color)20%,#fff);鑳屾櫙鑹诧細var(--lighterColor)锛沷utline:4pxsolidvar(--lighterColor);}鏁堟灉濡備笅锛圕hrome110+锛夎繕涓嶉€傚悎鐢紝杩囦袱骞村啀璇答煓佷笅闈㈡槸鎵€鏈夋柟妗堢殑鏁堟灉瀵规瘮锛屽熀鏈竴鑷村畬鏁淬€傚彲浠ヨ闂互涓嬩换涓€閾炬帴CSScolorlighter(codepen.io)CSScolorlighter(runjs.work)6.鎬荤粨浠ヤ笂浼樼己鐐逛竴鍏变粙缁嶄簡5绉嶄笉鍚岀殑娣疯壊瀹炵幇鏂瑰紡锛屽悇鏈変紭缂虹偣缂虹偣銆傛垜浠粠浠ヤ笅鍑犱釜鏂归潰姣旇緝瀹炵幇鎴愭湰锛氬疄鐜版€濊矾鐨勫鏉傚害锛屾槸鍚﹀鏄撴兂鍒伴€傞厤鎬э細鏄惁鑳介€傚簲鍚勭鍦烘櫙锛屼唬鐮佸鐢ㄦ€ц兘锛氬疄鐜版槸鍚﹀啑闀匡紝鏄惁闇€瑕侀澶栫殑鏍囩鍏煎鎬?鑳藉惁澶ц妯′娇鐢ㄥ疄鐜版垚鏈嚜閫傚簲浠ｇ爜澶嶇敤猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍鍔ㄧ敾猸愶笍猸愶笍猸愶笍锛堥珮锛夆瓙锔忊瓙锔忊瓙锔忊瓙锔忊瓙锔忊瓙锔忚嚜瀹氫箟灞炴€у姩鐢烩瓙锔忊瓙锔忊瓙锔忊瓙锔忊瓙锔忥紙寮猴級猸愶笍猸愶笍锔忊瓙锔?mix猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍猸愶笍锛堥珮锛夆瓙锔忥紙宸級鎬荤殑鏉ヨ锛屽悇鏂归潰閮芥帹鑽愯嚜瀹氫箟灞炴€у姩鐢汇€傚鏋滀笉鑰冭檻firefox锛屽熀鏈彲浠ユ斁蹇冧娇鐢ㄣ€備篃鍙互鏍规嵁瀹為檯闇€瑕侀€夋嫨鍏朵粬鏂瑰紡锛屼互浣跨敤鏇存柟渚夸负鍑嗐€傛渶鍚庯紝濡傛灉浣犺寰楄繕涓嶉敊锛屽浣犳湁甯姪锛屾杩庣偣璧炪€佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺㈣繖绡囨枃绔犲弬鍔犱簡SegmentFault鎬濈淮鍐欎綔鎸戞垬璧涳紝娆㈣繋浣犳鍦ㄩ槄璇荤殑浜哄姞鍏ャ€?/p>
