CSS3 顏色值HSL表示方式&amp;簡(jiǎn)單

CSS3 顏色值HSL表示方式&簡(jiǎn)單實(shí)例全教程

謂HSL

HSL色彩模式：就是色調(diào)(Hue)、飽和度(Saturation)、亮度(Lightness)三個(gè)顏色通道的改變以及它們相互之間的疊加來(lái)獲得各種顏色，色調(diào)(Hue)色調(diào)最大值360，飽和度和亮度有百分比表示0-100%之間。

因?yàn)槿藗兛吹筋伾谝粫r(shí)間會(huì)產(chǎn)生“這是什么顏色？深淺如何？明暗如何？”這個(gè)疑問(wèn)不是這是多少紅加多少綠多少藍(lán)混合而成的顏色，所以HSL色彩模式是人類(lèi)對(duì)顏色最直接的感知。
HSL(H,S,L)

取值：

H：
Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。取值為：0 - 360
S：
Saturation(飽和度)。取值為：0.0% - 100.0%
L：
Lightness(亮度)。取值為：0.0% - 100.0%

兼容性：

HSL被現(xiàn)代瀏覽器較好的支持，而且不需要任何前綴，IE6-IE7不支持。IE8支持該方式。

實(shí)例1:在css中直接使用hsl值

<style>.test{background-color:hsl(360,50%,50%);}</style>

實(shí)例2：使用Js修改dom時(shí)指定hsl值，以亮度為例
html:

    <style>        body {            padding: 100px;        }         #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">亮度：</label>            <input id="ex1" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="15" />        </div>    </div>

//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});

完整代碼：

<!doctype html><html lang="zh-CN"><head><title>動(dòng)態(tài)hsl調(diào)整背景色</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字體呈現(xiàn)基于逐浪字庫(kù)f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><style>body {    padding: 100px;}#ex1Slider .slider-selection {background: #BABABA;}</style><h1>動(dòng)態(tài)hsl調(diào)整背景色</h1><div class="form">    <div class="form-group">        <label for="">亮度：</label>        <input id="ex1" data-slider-id="ex1Slider" type="text"               data-slider-min="0" data-slider-max="100" data-slider-step="1"               data-slider-value="15" />    </div></div><script>//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});</script>  </body></html>

效果如下：

實(shí)例3：修改多個(gè)值：
html:

<style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?調(diào)：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">飽和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div>

js:

//色調(diào)$('#Hue').slider().on('change', function (e) {    showColor();});//飽和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//統(tǒng)一顯示顏色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();

完整代碼：

<!doctype html><html lang="zh-CN"><head><title>新建HTML</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字體呈現(xiàn)基于逐浪字庫(kù)f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><h1>動(dòng)態(tài)hsl調(diào)整背景色@多值</h1> <style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?調(diào)：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">飽和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div> <script>//色調(diào)$('#Hue').slider().on('change', function (e) {    showColor();});//飽和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//統(tǒng)一顯示顏色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();</script></body></html>

潑辣修圖」擁有上百項(xiàng)調(diào)整工具

是圖像調(diào)色的利器

同是潑辣團(tuán)隊(duì)出品的視頻應(yīng)用「潑辣24」

怎能不繼承著良好基因呢？

現(xiàn)在！

「潑辣24」的調(diào)色功能

來(lái)了！真的來(lái)了！

「潑辣24」的調(diào)色

到底有多強(qiáng)大呢？

我們一睹為快！

視頻調(diào)色！潑辣24重磅更新即將來(lái)臨

點(diǎn)擊鏈接觀(guān)看視頻

「潑辣24」加入了最為常用的曝光工具

包括曝光、對(duì)比度、高光、陰影、白色與黑色

同時(shí)加入了十分強(qiáng)大的調(diào)色工具

包括飽和度、鮮艷度、色溫、色調(diào)等等

最為震撼的是

「潑辣24」還加入了HSL工具

利用這個(gè)工具

你可以輕松的制作局部色彩效果

進(jìn)行色彩轉(zhuǎn)換

改變色彩明度

控制色彩純度

「潑辣24」是極少數(shù)

支持該工具的移動(dòng)應(yīng)用

從此以后

在手機(jī)上

你也可以輕松完成視頻調(diào)色

制作精美影片

這！

就是「潑辣24」

你的移動(dòng)視頻調(diào)色專(zhuān)家

點(diǎn)擊擴(kuò)展鏈接立即體驗(yàn)吧

熱點(diǎn)問(wèn)題解答

一、什么時(shí)候會(huì)推出「潑辣24」的安卓版本和桌面版本？

答：「潑辣24」目前除iOS版在蘋(píng)果應(yīng)用商店上架外，安卓版「潑辣24」已經(jīng)列入開(kāi)發(fā)計(jì)劃，且相關(guān)開(kāi)發(fā)工程師已經(jīng)就位，具體發(fā)布時(shí)間要視工程進(jìn)度，但肯定會(huì)比iOS版開(kāi)發(fā)周期要快，屆時(shí)官方會(huì)第一時(shí)間告之，在此之前還請(qǐng)耐心等待。至于其它版本「潑辣24」，比如桌面版，目前還處于論證階段。

二、為什么潑辣團(tuán)隊(duì)的產(chǎn)品都是先開(kāi)發(fā)蘋(píng)果版本？

答：除了iOS平臺(tái)蘋(píng)果手機(jī)相對(duì)來(lái)說(shuō)設(shè)備類(lèi)型少、標(biāo)準(zhǔn)統(tǒng)一，易于進(jìn)行兼容性適配，相比安卓相關(guān)工程要復(fù)雜數(shù)倍，會(huì)導(dǎo)致測(cè)試周期延長(zhǎng)，產(chǎn)品開(kāi)發(fā)嚴(yán)重滯后。當(dāng)然，工程團(tuán)隊(duì)人力不足也是另一個(gè)重要原因。好消息是潑辣團(tuán)隊(duì)自去年啟動(dòng)全球招募計(jì)劃以來(lái)已經(jīng)有大量?jī)?yōu)秀工程師加入，目前「潑辣24」安卓版開(kāi)發(fā)工程師已經(jīng)就位并準(zhǔn)備著手開(kāi)發(fā)。

三、「潑辣24」哪些功能是免費(fèi)的？哪些是收費(fèi)的？

答：「潑辣24」是一款免費(fèi)的視頻編輯分享工具，除付費(fèi)濾鏡外（付費(fèi)濾鏡也享有七天免費(fèi)試用）的其它所有編輯功能，及默認(rèn)濾鏡均為永久免費(fèi)使用。

目前「潑辣24」的訂閱會(huì)員可額外獲得電影LUT（辣特）濾鏡，該系列濾鏡由專(zhuān)業(yè)電影調(diào)色師制作完成，目前已經(jīng)擁有幾十部影片上百部LUT濾鏡，且保持每月更新（5部影片共計(jì)20款LUT）。

四、我購(gòu)買(mǎi)了「潑辣24」會(huì)員，但為何無(wú)法使用付費(fèi)濾鏡？

答：如果您購(gòu)買(mǎi)了「潑辣24」的會(huì)員但是依舊無(wú)法使用付費(fèi)濾鏡，請(qǐng)進(jìn)入「潑辣24」的設(shè)置，然后一直往下滑動(dòng)找到「恢復(fù)購(gòu)買(mǎi)」并點(diǎn)擊即可，如果依舊無(wú)法使用，請(qǐng)發(fā)送郵件至 support@polarr.co 獲取幫助。

五、我已經(jīng)是「潑辣修圖」會(huì)員，能免費(fèi)使用「潑辣24」的付費(fèi)濾鏡嗎？

答：對(duì)不起，目前「潑辣修圖」和「潑辣24」是完全獨(dú)立的兩款產(chǎn)品，其各自會(huì)員也完全獨(dú)立，因此您無(wú)法利用潑辣修圖的會(huì)員去解鎖「潑辣24」的高級(jí)功能。

六、「潑辣24」是否存在永久會(huì)員？

答：「潑辣24」目前僅支持訂閱會(huì)員，訂閱制對(duì)新用戶(hù)來(lái)說(shuō)更友好，用戶(hù)每月僅需支持很少的費(fèi)用（20元）就可以進(jìn)行初次體驗(yàn)。同時(shí)產(chǎn)品做不好用戶(hù)可以選擇不再續(xù)訂，對(duì)創(chuàng)作團(tuán)隊(duì)也是監(jiān)督和激勵(lì)。

另外關(guān)注潑辣修圖微信公眾號(hào)文章，我們會(huì)經(jīng)常性做各做福利活動(dòng)贈(zèng)送會(huì)員，至于傳說(shuō)中的「永久會(huì)員」，我們?nèi)ツ曛两裨瞥鋈涡疫\(yùn)購(gòu)買(mǎi)抽獎(jiǎng)活動(dòng)，并送出了近100名永久會(huì)員會(huì)籍，之于潑辣24，如果大家呼聲很高的話(huà)，我們不排除會(huì)在優(yōu)惠活動(dòng)中推出。

七、「潑辣24」會(huì)員到期后之前購(gòu)買(mǎi)的濾鏡是否仍然可以使用？

答：「潑辣24」電影LUT濾鏡為訂閱會(huì)員專(zhuān)享，會(huì)員到期后，所有付費(fèi)濾鏡將無(wú)法使用，直到你再次開(kāi)通會(huì)員。

八、「潑辣24」會(huì)員為什么會(huì)自動(dòng)扣款？如何退訂和退款？

答：「潑辣24」訂閱制遵循蘋(píng)果應(yīng)用商店的規(guī)則設(shè)計(jì)，選擇訂閱產(chǎn)品，默認(rèn)到期后自動(dòng)扣費(fèi)續(xù)費(fèi)。如果你不希望這樣，可以進(jìn)入你的蘋(píng)果ID帳號(hào)設(shè)置進(jìn)行修改。如果你誤操作導(dǎo)致消費(fèi)購(gòu)買(mǎi)，也可以通過(guò)蘋(píng)果應(yīng)用商店進(jìn)行直接退款，詳細(xì)步驟可參考百度經(jīng)驗(yàn)相關(guān)教程：

https://jingyan.baidu.com/article/456c463b33186d0a583144cc.html

九、我希望制作某部電影的辣特濾鏡，請(qǐng)問(wèn)如何告之你們？

答：「潑辣24」每月更新選題主要來(lái)自經(jīng)典影片及最新上映的熱門(mén)影片，如果會(huì)員有特別想要制作的電影LUT（辣特）可以發(fā)郵件至support@polarr.co告訴我們，如果會(huì)根據(jù)用戶(hù)的呼聲決定是否幫你達(dá)成心愿。

LUT濾鏡及使用問(wèn)題

一、我可以在「潑辣24」中導(dǎo)入「潑辣修圖」的濾鏡嗎？

答：當(dāng)然可以，您只需要進(jìn)入「潑辣24」的濾鏡界面，然后點(diǎn)擊右上角的「+」號(hào)，這時(shí)候會(huì)出現(xiàn)很多選項(xiàng)，您可以通過(guò)掃描「潑辣修圖」二維碼的方式，或者從相冊(cè)導(dǎo)入「潑辣修圖」二維碼的方式來(lái)安裝「潑辣修圖」濾鏡。

二、為什么導(dǎo)入「潑辣修圖」濾鏡之后，我在「潑辣24」里面看到的效果和我在「潑辣修圖」里面看到的效果不一樣？

答：如果您的「潑辣修圖」濾鏡包含了局部調(diào)整（例如漸變調(diào)整、圓形調(diào)整等）、特效調(diào)整（例如眩光、色差、暗角）、圖層調(diào)整等參數(shù)，那么這些參數(shù)是會(huì)被「潑辣24」自動(dòng)忽略的，因此效果可能和您在「潑辣修圖」中看到的不一樣。

三、為什么我無(wú)法運(yùn)行「潑辣24」？

答：首先，請(qǐng)確認(rèn)您的系統(tǒng)是iOS 12.0或更高版本，其次請(qǐng)確認(rèn)您授權(quán)了使用「潑辣24」所必需的權(quán)限，如果依舊無(wú)法使用，請(qǐng)發(fā)送郵件至 support@polarr.co 獲取幫助。

四、什么是LUT？

答：LUT是Look Up Table（顏色查找表）的縮寫(xiě)，為了方便大家記憶潑辣團(tuán)隊(duì)給LUT起了一個(gè)中文譯名叫「辣特」，您可以將LUT（辣特）簡(jiǎn)單的認(rèn)為是一個(gè)濾鏡，但這個(gè)濾鏡具有超強(qiáng)的兼容性，可以在幾乎所有的專(zhuān)業(yè)圖像/視頻編輯軟件中運(yùn)行，最為常見(jiàn)的LUT格式為cube格式，「潑辣24」支持的LUT格式也是cube格式。

五、LUT有什么優(yōu)勢(shì)？

答：LUT（辣特）因?yàn)槭屈c(diǎn)到點(diǎn)的色彩調(diào)整，所以可以做出十分精細(xì)和細(xì)膩的色彩效果，同時(shí)LUT（辣特）具有極高的運(yùn)算效率和極強(qiáng)的兼容性，最為重要的是，您通過(guò)其他軟件導(dǎo)出的LUT（辣特）也可以在「潑辣24」中加載和使用！

六、如何通過(guò)「潑辣24」導(dǎo)入LUT？

答：您只需要進(jìn)入「潑辣24」的濾鏡界面，然后點(diǎn)擊右上角的「+」號(hào)，這時(shí)候會(huì)出現(xiàn)很多選項(xiàng)，然后選擇「導(dǎo)入LUT文件」，接著選擇對(duì)應(yīng)的LUT文件（后綴為.cube的文件）即可。

七、如何將潑辣修圖的調(diào)整導(dǎo)出為L(zhǎng)UT？

答：目前僅有「潑辣修圖」桌面版（網(wǎng)頁(yè)版、Windows 10版本、Mac OS版本）支持該功能，您只需要調(diào)整萬(wàn)效果之后進(jìn)入LUT菜單，然后選擇「導(dǎo)出LUT」即可：

注意！如果您的調(diào)整里面包含局部調(diào)整、特效、質(zhì)感等參數(shù)，LUT是無(wú)法包含的，因此這些調(diào)整會(huì)被忽略，您可以在導(dǎo)出面板中看到哪些參數(shù)被忽略了：

八、「潑辣24」中的LUT如何導(dǎo)出？

答：對(duì)不起，「潑辣24」目前并不支持參數(shù)微調(diào)和LUT導(dǎo)出功能。

九、「潑辣24」是否會(huì)推出轉(zhuǎn)場(chǎng)功能？

答：目前，「潑辣24」僅僅是1.0版發(fā)布，未來(lái)團(tuán)隊(duì)將根據(jù)用戶(hù)的反饋添加和優(yōu)化各類(lèi)功能，請(qǐng)對(duì)我們保持關(guān)注。

十、我在使用「潑辣24」過(guò)程中發(fā)現(xiàn)一些Bug，請(qǐng)問(wèn)如何反饋？

答：潑辣24在公測(cè)期間就收到了廣大用戶(hù)的許多有益建議，如果您在使用「潑辣24」的過(guò)程中遇到使用問(wèn)題，請(qǐng)把詳細(xì)問(wèn)題描述及硬件型號(hào)、軟件版本等信息發(fā)送郵件至 support@polarr.co ，如果能錄制視頻將更有助于幫助我們快速解決問(wèn)題，感謝大家的支持。

十一、我向你們反饋的問(wèn)題，為什么一直沒(méi)有修復(fù)？

答：首先感謝您積極反饋建議。潑辣團(tuán)隊(duì)目前還是一個(gè)很小的創(chuàng)業(yè)團(tuán)隊(duì)，限于人力，我們無(wú)法對(duì)所有郵件一一回復(fù)。而且Bug的檢測(cè)、驗(yàn)證、修復(fù)、封裝、測(cè)試、發(fā)布，需要專(zhuān)業(yè)的流程和時(shí)間。潑辣團(tuán)隊(duì)盡量保證每一款產(chǎn)品（版本）的最佳可用性，不會(huì)向用戶(hù)發(fā)布半成品和殘次品，所以請(qǐng)盡量多給我們一些時(shí)間，你們的反饋郵件我們都已仔細(xì)閱讀，向你們的熱情和信任致敬。

潑辣24功能簡(jiǎn)介

「潑辣24」，幫助你輕松獲得真實(shí)電影質(zhì)感和影視級(jí)拍攝體驗(yàn)，內(nèi)置「智能濾鏡引擎」，能夠不斷學(xué)習(xí)你的色彩偏好，毫秒之間為你匹配最佳色彩方案。

? 內(nèi)置海量專(zhuān)業(yè)影視級(jí)LUT（辣特），基于熱門(mén)影視定期更新

? 不斷成長(zhǎng)的「智能濾鏡引擎」，用得越多就越懂你

? 影視級(jí)防抖體驗(yàn)，輕松獲得穩(wěn)定畫(huà)面

? 強(qiáng)勁「慣性縮放」，輕松擁有專(zhuān)業(yè)級(jí)別的鏡頭拉伸

? 高品質(zhì)的美顏和面部?jī)?yōu)化，自然不失真

? 便利「瞬時(shí)保存」模式，即錄即存無(wú)需等待

? 音軌編輯、變速控制等多項(xiàng)基礎(chǔ)調(diào)整

? 支持導(dǎo)入本地視頻進(jìn)行編輯

? 支持導(dǎo)入「潑辣修圖」濾鏡和外部LUT（.cube）文件

SS變量（又名自定義屬性）已在Web瀏覽器中支持了近四年。我一般也會(huì)根據(jù)項(xiàng)目情況使用它們。它們非常有用且易于使用，但是前端開(kāi)發(fā)人員通常可能會(huì)誤用或誤解它們。

簡(jiǎn)介

CSS變量是在CSS文檔中定義的值，其目的是可重用性并減少CSS值中的冗余。下面是一個(gè)基本示例。

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #235ad1;
}

在此代碼段中，#235ad1使用了3次。想象一下，對(duì)于一個(gè)大型項(xiàng)目，不同的CSS文件，如果哪天被要求更改顏色。我們可以做的最好快的方式就是“查找并替換”。

使用CSS變量，可以更快解決這個(gè)問(wèn)題。定義變量名需要用--開(kāi)頭。首先，我們現(xiàn)在將在:root或<html>元素中定義變量。

:root {
  --color-primary: #235ad1;
}

.section {
  border: 2px solid var(--color-primary);
}

.section-title {
  color: var(--color-primary);
}

.section-title::before {
  /* Other styles */
  background-color: var(--color-primary);
}

是不是比前面的干凈得多？--color-primary變量是全局變量，因?yàn)槲覀冊(cè)?root元素中定義了它。但是，我們還可以將變量范圍限定到整個(gè)文檔中的某些元素。

命名變量

與編程語(yǔ)言命名變量相似，CSS 變量的有效命名應(yīng)包含字母數(shù)字字符，下劃線(xiàn)和破折號(hào)。另外，值得一提的是 CSS 變量區(qū)分大小寫(xiě)。

/* 合法命名 */
:root {
 --primary-color: #222;
 --_primary-color: #222;
 --12-primary-color: #222;
 --primay-color-12: #222;
}

/* 非法命名 */
:root {
 --primary color: #222; /* Spacings are not allowed */
 --primary$%#%$#
}

作用域

CSS 變量也有自己的作用域，這個(gè)概念類(lèi)似于其他編程語(yǔ)言。以 JS 為例:

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

變量element是全局的，因此可以在cool()函數(shù)內(nèi)部訪(fǎng)問(wèn)。但是，只能在cool()函數(shù)中訪(fǎng)問(wèn)變量otherElement。

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

變量--primary-color是全局變量，可以從文檔中的任何地方訪(fǎng)問(wèn)。變量--primary-color由于是在.section-title定義的，所以只能在.section-title中訪(fǎng)問(wèn)。

下面是一個(gè)比較直觀(guān)的示例圖片，可以加強(qiáng)我們的理解：

變量--primary-color用于標(biāo)題顏色。我們想為作者名和最新文章標(biāo)題自定義顏色，因此我們需要將--primary-color覆蓋。這同樣適用于--unit變量。

/* 全局變量 */
:root {
  --primary-color: #235ad1;
  --unit: 1rem;
}

/* section-title 默認(rèn)的顏色和間距 */
.section-title {
  color: var(--primary-color);
  margin-bottom: var(--unit);
}

/* 覆蓋 section-title 樣式 */
.featured-authors .section-title {
  --primary-color: #d16823;
}

.latest-articles .section-title {
  --primary-color: #d12374;
  --unit: 2rem;
}

回退方案

這里的回退不是不支持 CSS 變量的回退，而是 CSS 變量可以支持回退方案。考慮以下示例：

.section-title {
  color: var(--primary-color, #222);
}

注意，var()有多個(gè)值。第二個(gè)#221只在變量--primary-color由于某種原因沒(méi)有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個(gè)var()中。

.section-title {
  color: var(--primary-color, var(--black, #222));
}

在變量值依賴(lài)于某個(gè)動(dòng)作的情況下，該特性非常有用。當(dāng)變量沒(méi)有值時(shí)，為它提供一個(gè)回退很重要。

用例一：控制組件的大小

在設(shè)計(jì)系統(tǒng)中，按鈕通常有多種尺寸。通常，按鈕可以具有三種尺寸（Small, normal, large）。使用 CSS 變量來(lái)實(shí)現(xiàn)它并不容易：

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

通過(guò)在按鈕組件作用域內(nèi)更改變量--unit，我們創(chuàng)建了按鈕的不同變體。

用例二：CSS 變量和 HSL 顏色

HSL代表色調(diào)，飽和度，亮度。色相的值決定了顏色，飽和度和亮度值可以控制顏色的深淺。

:root {
  --primary-h: 221;
  --primary-s: 71%;
  --primary-b: 48%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
  transition: background-color 0.3s ease-out;
}

/* 使背景更暗 */
.button:hover {
  --primary-b: 33%;
}

這里何通過(guò)減小變量--primary-b使按鈕變暗。

用例三：比例調(diào)整

如果您使用過(guò)Photoshop，Sketch，F(xiàn)igma或Adobe XD之類(lèi)的設(shè)計(jì)程序，那么我們會(huì)想在調(diào)整元素大小的同時(shí)按住Shift鍵以避免扭曲它。

在CSS中，沒(méi)有直接的方法來(lái)做到這一點(diǎn)，但是我們有一個(gè)簡(jiǎn)單的解決方法，使用CSS變量。

假設(shè)有一個(gè)圖標(biāo)，并且其寬度和高度應(yīng)該相等。我定義了變量--size，用于寬度和高度。

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

現(xiàn)在，您只需更改--size變量的值即可模擬Shift調(diào)整大小的效果。

用例四：CSS Grid

CSS 變量對(duì)于網(wǎng)格非常有用。假設(shè)希望網(wǎng)格容器根據(jù)定義的首選寬度顯示其子項(xiàng)。與為每個(gè)變體創(chuàng)建類(lèi)并復(fù)制CSS相比，使用變量更容易做到這一點(diǎn)。

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;

這樣，我們可以創(chuàng)建一個(gè)完整的網(wǎng)格系統(tǒng)，該系統(tǒng)靈活，易于維護(hù)，并且可以在其他項(xiàng)目中使用。可以將相同的概念應(yīng)用于grid-gap屬性。

wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

用例五：全值聲明，CSS 漸變

以全值表示，例如，類(lèi)似漸變的東西。如果整個(gè)系統(tǒng)中使用漸變或背景，將其存儲(chǔ)到CSS變量中可能是一件好事。

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

或者我們可以存儲(chǔ)一個(gè)值。以角度為例:

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

用例六：Background Position

我們可以在 CSS 變量中包含多個(gè)值，這在需要根據(jù)特定上下文將元素放置在不同位置的情況下很有用。

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

用例七：在明暗模式之間切換

現(xiàn)在，網(wǎng)站比以往任何時(shí)候都更需要深色和淺色模式。使用CSS變量，我們可以存儲(chǔ)它們的兩個(gè)版本，并根據(jù)用戶(hù)或系統(tǒng)偏好在它們之間切換。

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* 添加到`<html>`元素的類(lèi)*/
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

用例八：設(shè)置默認(rèn)值

在某些情況下，您將需要使用JavaScript設(shè)置CSS變量。假設(shè)我們需要獲取可擴(kuò)展組件的高度。

變量--details-height-open為空，它將被添加到特定的HTML元素中。當(dāng)JavaScript由于某種原因失敗時(shí)，提供適當(dāng)?shù)哪J(rèn)值或后備值很重要。

.section.is-active {
  max-height: var(--details-height-open, auto);
}

auto值是 JS 失敗時(shí)的回退值，并且沒(méi)有定義CSS變量——details-height-open。

用例九：控制 wrapper 寬度

網(wǎng)站wrapper 可以有多種變化。有時(shí)候是需要一個(gè)小包裝一個(gè)頁(yè)面，一個(gè)大包裝另一個(gè)頁(yè)面。在這種情況下，合并CSS變量可能是有用的。

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

用例十一：動(dòng)態(tài)網(wǎng)格項(xiàng)目

我們可以在style屬性中添加--item-width變量，僅此而已。例如，這種方法可以幫助建立網(wǎng)格原型。

HTML

<div class="wrapper" style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用戶(hù)頭像

另一個(gè)有用的用例是大小調(diào)整元素。假設(shè)我們需要四種不同大小的用戶(hù)頭像，并且只能使用一個(gè)變量來(lái)控制其大小。

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

用例十三：媒體查詢(xún)

組合CSS變量和媒體查詢(xún)對(duì)于調(diào)整整個(gè)網(wǎng)站中使用的變量非常有用。我能想到的最簡(jiǎn)單的示例是更改間距值。

:root {
  --gutter: 8px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 16px;
  }
}

使用--gutter變量的任何元素都將根據(jù)視口大小更改其間距，這是不是很棒嗎？

用例十四：繼承

是的，CSS變量確實(shí)繼承。如果父元素中定義了CSS變量，那么子元素將繼承相同的CSS變量。我們看下面的例子：

HTML

<div class="parent">
  <p class="child"></p>
</div>

css

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

.child元素可以訪(fǎng)問(wèn)變量--size，因?yàn)樗鼜母冈乩^承了它。很有趣,那它在實(shí)際的項(xiàng)目中有啥用呢？

我們有一組以下需求的操作項(xiàng)

改變一個(gè)變量就可以改變所有項(xiàng)的大小
間距應(yīng)該是動(dòng)態(tài)的

HTML

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

CSS

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

請(qǐng)注意，這里是如何將變量--size用于flexbox gap屬性的。這意味著間距可以是動(dòng)態(tài)的，并且取決于--size變量。

另一個(gè)有用的例子是使用CSS變量繼承來(lái)定制CSS動(dòng)畫(huà)：

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

這樣，我們就不需要定義@keyframes兩次，它將繼承.walk和.run元素的定制CSS 變量。

CSS 變量的工作方式

當(dāng)var()函數(shù)中的CSS變量無(wú)效時(shí)，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

我使用16px是color屬性的值。這是完全錯(cuò)誤的。由于color屬性是繼承的，因此瀏覽器將執(zhí)行以下操作：

該屬性是否可繼承？

如果是，父節(jié)點(diǎn)是否擁有該屬性?
是的，繼承該值
否:設(shè)置為初始值
否:設(shè)置為初始值

下面解釋瀏覽器工作的流程圖。

網(wǎng)址值

我們可能無(wú)法控制網(wǎng)頁(yè)中的所有資源，其中一些必須在線(xiàn)托管。在這種情況下，您可以將鏈接的URL值存儲(chǔ)在CSS變量中。

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

但是，能想知道是否可以使用url()插入 CSS 變量。考慮以下

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

由于var(--main-bg)被視為url本身，因此無(wú)效。當(dāng)瀏覽器計(jì)算出該值時(shí)，該值將不再有效，并且將無(wú)法按預(yù)期運(yùn)行。

存儲(chǔ)多個(gè)值

CSS 變量也可以表示多個(gè)值，看下面的例子：

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

在示例中，我們有一個(gè)rgba()函數(shù)，并且RGB值存儲(chǔ)在CSS變量中，以逗號(hào)分隔。如果我們想根據(jù)元素調(diào)整alpha值，這樣做可以提供靈活性。唯一的缺點(diǎn)是無(wú)法使用DevTools顏色選擇器來(lái)調(diào)整rgba值。

另一個(gè)例子是將它與background屬性一起使用。

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

@keyframes規(guī)則中的動(dòng)畫(huà)變量

如果你閱讀過(guò)CSS變量規(guī)范，則可能會(huì)讀到“動(dòng)畫(huà)污染”一詞。這個(gè)想法是，在@keyframes規(guī)則中使用CSS變量時(shí)，無(wú)法對(duì)其進(jìn)行動(dòng)畫(huà)處理。

html

<div class="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

動(dòng)畫(huà)無(wú)法順利進(jìn)行。它將僅對(duì)值 (0, 50px, 100px)進(jìn)行動(dòng)畫(huà)處理。根據(jù)CSS規(guī)范：

@keyframes規(guī)則中使用的任何自定義屬性都會(huì)受到動(dòng)畫(huà)污染，這將影響通過(guò)動(dòng)畫(huà)屬性中的var()函數(shù)引用它時(shí)如何處理它。

如果我們希望上述動(dòng)畫(huà)能夠正常工作，則應(yīng)采用老式的方法。這意味著，我們需要用要設(shè)置動(dòng)畫(huà)的實(shí)際CSS屬性替換變量。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

計(jì)算

你可能不知道可以使用 CSS 變量進(jìn)行計(jì)算。考慮下面示例：

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

.c-avatar 大小會(huì)有不同的變化。我將默認(rèn)值設(shè)置為1，所以默認(rèn)大小為(30px * 30px)。注意不同的類(lèi)變化以及更改--size值如何導(dǎo)致化身的大小變化。

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

Devtools和CSS變量

我們可以在瀏覽器DevTools中使用一些有用的技巧，這樣就能更輕松地使用CSS變量。

看到顏色

使用CSS變量時(shí)，看到顏色或背景值的視覺(jué)指示器是否有用？Chrome和Edge證明了這一點(diǎn)。

計(jì)算值

要查看CSS變量的計(jì)算值，只要將鼠標(biāo)懸停或單擊即可。

禁用CSS變量

當(dāng)我們需要從使用CSS變量的所有元素中禁用CSS變量時(shí)，可以通過(guò)從定義它的元素中取消選中它來(lái)實(shí)現(xiàn)。參見(jiàn)下圖：

本文介紹了 CSS 變量的很多內(nèi)容，希望能對(duì)你有些幫助，二創(chuàng)不易，還望點(diǎn)個(gè)贊+轉(zhuǎn)發(fā)。

作者：Ahmad Shadeed 譯者：前端小智來(lái)源：ishadeed

原文：https://ishadeed.com/article/css-vars-101/

在線(xiàn)咨詢(xún)

上一篇：mac硬盤(pán)、U盤(pán)、SD卡等數(shù)據(jù)恢復(fù)軟件
下一篇：CSS技巧：常用的幾個(gè)CSS前端效果更輕松的寫(xiě)頁(yè)面

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS3 顏色值HSL表示方式&amp;amp;簡(jiǎn)單

謂HSL

取值：

兼容性：

熱點(diǎn)問(wèn)題解答

LUT濾鏡及使用問(wèn)題

潑辣24功能簡(jiǎn)介

簡(jiǎn)介

命名變量

作用域

回退方案

用例一：控制組件的大小

用例二：CSS 變量和 HSL 顏色

用例三：比例調(diào)整

用例四：CSS Grid

用例五：全值聲明，CSS 漸變

用例六：Background Position

用例七：在明暗模式之間切換

用例八：設(shè)置默認(rèn)值

用例九：控制 wrapper 寬度

用例十一：動(dòng)態(tài)網(wǎng)格項(xiàng)目

用例十二：用戶(hù)頭像

用例十三：媒體查詢(xún)

用例十四：繼承

CSS 變量的工作方式

網(wǎng)址值

存儲(chǔ)多個(gè)值

@keyframes規(guī)則中的動(dòng)畫(huà)變量

計(jì)算

Devtools和CSS變量

看到顏色

計(jì)算值

禁用CSS變量

您的項(xiàng)目需求

CSS3 顏色值HSL表示方式&簡(jiǎn)單