CSS涓殑鍑芥暟鍜屽彉閲忊檧鈸库檧Modify By JasonSubmaraCSS鍑芥暟涓嶫avascript涓€鏍凤紝CSS涓篃鏈変竴浜涜绠楀嚱鏁帮紝浠呭涓庝竴浜涘父鐢ㄧ殑鍜屼釜浜轰簡瑙ｇ殑鍋氫竴娆″垎浜€侰SS鍑芥暟杈冨锛屼粠甯哥敤鎬у拰瀹為檯鍑哄彂锛屾寜杩愮敤姣旈噸椤哄簭鎺掑簭Color 棰滆壊鐩稿叧rgb()銆乺gba()杩欎袱涓嚱鏁颁竴瀹氭槸涓嶄細闄岀敓鐨勶紝瀵逛簬棰滆壊灞炴€у€奸€氳繃绾㈢豢钃濅笁鍘熻壊鏉ヨ繘琛岃皟鏁淬€傚尯鍒湪浜?rgba() 涓?a 琛ㄧず閫忔槑搴︼紝鍙栧€?-1涔嬮棿銆傜浉瀵规潵璇存渶涓哄父鐢ㄩ櫎姝や箣澶栵紝绫讳技鐨凜SS棰滆壊鍑芥暟杩樻湁锛歨sl()銆乭sla()浣跨敤鑹茬浉銆侀ケ鍜屽害銆佷寒搴︺€?閫忔槑搴?鏉ュ畾涔夐鑹瞙wb()浣跨敤鑹茬浉銆佷互鍙婇粦鐧芥贩鍚堝害锛坵hiteblack锛夊涓婃柟鍙冲浘鎵€绀恒€傜浉瀵圭殑锛屽彲鑳藉浜庣編鏈垨璁捐甯堟洿鑳界悊瑙ｄ互鑹茬浉涓轰富鐨勯鑹查€夊彇鏂瑰紡锛屽叾瀹炲浜庝唬鐮佹潵璇达紝鎴戜滑浣跨敤rgb()鍜宺gba()鍗冲彲锛屽吋瀹规€т篃鏄壇濂界殑銆俢olor-mod()CSS Color Module Level 4 涓彁鍑轰竴涓柊鐨凜SS鍏舵槸鍩轰簬涓€涓鑹插€硷紝鍦ㄤ笉鍚岀殑鏉′欢涓嬭皟鏁村弬鏁板緱鍒扮殑鏂伴鑹诧紝鏈綔娣卞叆浜嗚В銆傚彲浠ラ€氳繃https://colorme.io/杩欎釜缃戠珯鏉ョ湅涓嬪叿浣撻鑹插€兼槸濡備綍鍙樺寲鐨勶紝鍚屾椂澶ф紶鑰佸笀鐨勫崥瀹腑涔熸湁鐩稿叧鐨勬枃妗ｈВ閲婏紝鍙互鍙傝€冧笅銆備娇鐢╟olor-mod()鍑芥暟淇敼棰滆壊Transform 鍙樻崲鐩稿叧瀵逛簬涓嶅悓鍐呮牳娴忚鍣紝鍙兘闇€瑕佸姞鍏ョ鏈夊墠缂€鏉ヨ繘琛屽搴旂殑鍏煎鎬у鐞嗭紝鑰?d杈规崲锛孖E姣掔槫鍒欐槸涓€瀹氫笉鏀寔鐨則ranslate 浣嶇疆鍙樻崲锛歵ranslate()銆乼ranslateX()銆乼ranslateY()銆乼ranslate3d()rotate 鏃嬭浆鍙樻崲锛歳otate()銆乺otate3d()銆乺otateX()銆乺otateY()銆乺otateZ()skew 鍊炬枩鍙樻崲锛歴kew()銆乻kewX()銆乻kewY()scale 缂╂斁鍙樻崲锛歴cale()銆乻cale3d()銆乻caleX()銆乻caleY()銆乻caleZ()Background 鑳屾櫙鐩稿叧linear-gradient() 绾挎€ф笎鍙樹唬鐮佸疄鐜板涓嬶細radial-gradient() 寰勫悜娓愬彉 浠ｇ爜瀹炵幇濡備笅锛歝onic-gradient() 瑙掑悜娓愬彉 浠ｇ爜瀹炵幇濡備笅锛歟lement() 灏嗙綉绔欎腑鐨勬煇閮ㄥ垎褰撲綔鍥剧墖娓叉煋CSS Color Module Level 4 涓彁鍑轰竴涓柊鐨凜SS锛岀敱浜庡彧鑳藉湪Firefox 娴忚鍣ㄥ唴浜х敓鏁堟灉锛屽彲浠ュ弬鑰冨ぇ婕犺€佸笀鐨勫彟涓€绡囨枃绔狅紝閲岄潰鏈夋洿涓鸿缁嗙殑浠嬬粛CSS element()鍑芥暟Math 璁＄畻鐩稿叧鐩稿鏉ヨ锛岃绠楃浉鍏崇殑鍑芥暟鍏跺疄鍏煎鎬т竴鑸紝瀵逛簬涓汉椤圭洰鎴栫Щ鍔ㄧ椤圭洰鍙互鍋氬皾璇昺in() 鍙栨渶灏忓€煎浜巇ialog杩欎竴绫诲厓绱狅紝鍏堕暱搴﹀簲褰撻€傚簲浜庝笉鍚屽垎杈ㄧ巼涓嬶紝浠ュ線鍙兘闇€瑕佷娇鐢?vw / % 绛夋潵娓叉煋锛屼絾鏄細鏈変竴涓棶棰橈紝閭ｅ氨鏄湪涓嶅悓鍒嗚鲸鐜囦笅鍙兘 60vw / 60% 涓嬶紝dialog鐨勫搴﹀湪1920鍒嗚鲸鐜囦笅鐪嬬潃杩樼畻姝ｅ父锛屼絾鏄湪1366绛夋瘮杈冨皬鐨勫垎杈ㄧ巼涓嬩細鍑虹幇瀹藉害涓嶈冻浠ュ绾冲唴閮ㄥ厓绱狅紝鎴栬€呭仛閫傞厤鏃朵笉澶紭闆呭睍绀虹殑鏃跺€欙紝鍙互鑰冭檻缁撳悎杩欎竴绫昏绠楀嚱鏁版潵杩涜銆?dialog { width: min(700px,80vw) /* 瑙ｆ瀽涓哄搴﹀彇 700px 鍜?80vw 涓緝灏忕殑閭ｄ竴涓暟鍊?*/ }max() 鍙栨渶澶у€煎悓min() 鍙栧€奸€昏緫clamp() 鍙栧€艰寖鍥碿lamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))鍏朵腑MIN琛ㄧず鏈€灏忓€硷紝VAL琛ㄧず棣栭€夊€硷紝MAX琛ㄧず鏈€澶у€笺€傛剰鎬濇槸锛屽鏋淰AL鍦∕IN鍜孧AX鑼冨洿涔嬮棿锛屽垯浣跨敤VAL浣滀负鍑芥暟杩斿洖鍊硷紱濡傛灉VAL澶т簬MAX锛屽垯浣跨敤MAX浣滀负杩斿洖鍊硷紱濡傛灉VAL灏忎簬MIN锛屽垯浣跨敤MIN浣滀负杩斿洖鍊笺€?dialog { width: clamp(240px, 50vw, 600px) }/* 瑙ｆ瀽涓哄綋 50vw > 600px 鏃讹紝.dialog width鍊肩瓑浜?00px */ /* 褰?240px <= 50vw <= 600px 鏃讹紝.dialog width鍊肩瓑浜?0vw */ /* 杩涗竴姝ョ缉灏忥紝褰?50vw < 240px鏃讹紝.dialog width鍊肩瓑浜?240px */ 鐩稿叧渚嬪瓙鏁堟灉灞曠ず鍙互鍙傝€冨紶閼棴鑰佸笀鍗氬涓殑鍦ㄧ嚎浠ｇ爜锛屽湴鍧€濡備笅:https://www.zhangxinxu.com/study/202004/css-clamp-function-demo.phpcalc() 鍔ㄦ€佽绠梒alc() 搴旇鏄渶涓哄父瑙佺殑css璁＄畻鍑芥暟浜嗭紝鍙粨鍚?鍥涘垯杩愮畻鏉ュ彇閮ㄥ垎鐨勫楂樼瓑锛屽彲鐢ㄤ簬鍦ｆ澂甯冨眬涓富浣撳唴瀹圭殑瀹介珮璁＄畻绛夐渶瑕佸姩鎬佽绠楃殑鍦版柟Attr() 灞炴€у嚱鏁颁粎浠庡畼鏂圭殑渚嬪瓙涓彧鑳界湅鍒颁簺鍩虹鐨勫簲鐢紝涓斿鏄撶悊瑙ｏ紝鑰屽紶閼棴鑰佸笀鍗氬涓寚鍑猴細浼犵粺鐨刟ttr()璇硶鍙兘璁〩TML灞炴€т綔涓哄瓧绗︿覆浣跨敤锛屼笖鍙兘浣跨敤鍦ㄤ吉鍏冪礌涓叏鏂扮殑attr()璇硶閭ｅ彲灏卞畬鍏ㄤ笉寰椾簡浜嗭紝鍙互璁〩TML灞炴€у€艰浆鎹㈡垚浠绘剰鐨凜SS鏁版嵁绫诲瀷銆備釜浜哄皾璇曚唬鐮佺洿鎺ユ姤閿欎簡~馃槄锛岃繕鏄缓璁兂瑕佷簡瑙ｇ殑鏌ョ湅涓嬪師鏂囩珷锛歨ttps://www.zhangxinxu.com/wordpress/2020/10/css-attr-polyfill/CSS 鍙橀噺var()鍑芥暟鍙互浠ｆ浛鍏冪礌涓换浣曞睘鎬т腑鐨勫€肩殑浠讳綍閮ㄥ垎銆倂ar()鍑芥暟涓嶈兘浣滀负灞炴€у悕銆侀€夋嫨鍣ㄦ垨鑰呭叾浠栭櫎浜嗗睘鎬у€间箣澶栫殑鍊笺€侰SS 鍙橀噺澹版槑--* 鐢ㄦ潵澹版槑鍙橀噺锛屼娇鐢?var(--*) 鏉ヤ娇鐢ㄥ彉閲廋SS鍙橀噺澹版槑鍙彲鐢ㄤ簬灞炴€у€硷紝涓嶅彲鐢ㄤ互灞炴€у悕CSS鍙橀噺涓嶆敮鎸佸涓悓鏃跺０鏄嶤SS鍙橀噺浣跨敤鐨勫悎娉曟€SS鍙橀噺涓庡睘鎬у崟浣嶇粨鍚堥渶瑕佷娇鐢?* 涔樻硶CSS鍙橀噺鐨勫０鏄庢椂鍙浉浜掕皟鐢ㄥ０鏄庣殑鍙橀噺:root { --main-bg-color: pink; --ml: 20px; --mlv: 20; --primary-size: 20px; --base-font-size: var(--primary-size); /* 鍙橀噺澹版槑鏃剁殑璋冪敤 */ } body { background-color: var(--main-bg-color);/* 琛ㄧ幇缁撴灉涓猴細鑳屾櫙鑹蹭负绮夌孩 */ } .ml20 { margin-left: var(--ml); margin-left: calc(var(--mlv) * 1px); /* 琛ㄧ幇缁撴灉閮芥槸宸﹂棿璺?0px,姝ゅ鐨勫彉閲忚繍鐢ㄩ渶鍖哄埆甯﹀崟浣嶅拰涓嶅甫鍗曚綅鐨勪娇鐢ㄥ樊寮?*/ }CSS 鍙橀噺浣滅敤鍩?root { --color: purple; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } <p>鎴戠殑绱壊缁ф壙浜庢牴鍏冪礌</p> <div>鎴戠殑缁胯壊鏉ヨ嚜鐩存帴璁剧疆</div> <div id='alert'> ID閫夋嫨鍣ㄦ潈閲嶆洿楂橈紝鍥犳闃挎媺鏄孩鑹诧紒 <p>鎴戜篃鏄孩鑹诧紝鍗犱簡缁ф壙鐨勫厜</p> </div>涓婅堪浠ｇ爜涓紝鏄剧ず鍑轰簡CSS鍙橀噺涔熸槸鍏锋湁浣滅敤鍩熺殑: root 鍙栧叏灞€浣滅敤鍩燂紝div 鍙栨墍鏈夌殑div鍏冪礌锛?alert 鍙栨墍鏈塱d涓篴lert鐨勫厓绱犱娇鐢紝鎸夌収css瑙ｆ瀽椤哄簭锛屼笂闈㈡渚嬩唬鐮佺殑鍏冪礌棰滆壊鍗冲拰鏂囧瓧琛ㄨ堪涓€鑷碕S璇诲彇CSS鍙橀噺var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); // 杈撳嚭cssVarColor // 杈撳嚭鍙橀噺鍊兼槸锛?cd0000 console.log(cssVarColor);CSS 鍙橀噺鍦ㄦ棩娓愬畬鍠勶紝娴忚鍣ㄥ浜庡叾鏀寔鎬т篃鍦ㄦ參鎱㈠彉澶氾紝鑰屽尯鍒簬Sass/Less 绛夐澶勭悊鍣ㄦ潵璇达紝鍘熺敓鍙橀噺涓嶉渶瑕佸幓杩涜缂栬瘧绛夋搷浣滐紝浣嗘槸鐩稿鐨勶紝CSS鍙橀噺鐨勮娉曡繕鏈夊緟鎻愰珮鍜屼紭鍖栵紝涓嶈繃鎴戜滑鍙互鎻愬墠鍋氬皾璇曞拰杩愮敤~鍐呭浜涜娴呮樉锛屼粎鏄釜浜哄浜庨儴鍒咰SS鐩稿叧鐨勭煡璇嗙殑褰掔撼鎬荤粨锛屼笉褰撲箣澶勶紝鎰熻阿鎸囨锛佸闇€瑕佹洿澶氭洿璇︾粏鐨勮В璇伙紝鍙€氳繃鍙傝€冮摼鎺ラ槄璇荤浉鍏虫枃绔犲仛杩戜竴姝ヤ簡瑙鏂囦腑閮ㄥ垎妗堜緥浠ｇ爜鍦ㄦ垜涓汉鐨凣ithub涓婏紝鍙互杩涜涓€涓嬪弬鑰儈鍙傝€冮摼鎺ss鍑芥暟绔熺劧鏈?6涓紒锛侊紒css鍑芥暟澶у叏css hwb() Function浜嗚ВCSS min()/max()/clamp()鏁板鍑芥暟浣跨敤color-mod()鍑芥暟淇敼棰滆壊Polyfill鍚婄偢澶╃殑CSS attr()鏂拌娉旵SS 鍙橀噺鏁欑▼
