CSS3 顏色值HSL表示方式&amp;簡單

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

謂HSL

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

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

取值：

H：
Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來指定顏色。取值為：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時指定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>動態(tài)hsl調(diào)整背景色</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字體呈現(xiàn)基于逐浪字庫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>動態(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：修改多個值：
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)基于逐浪字庫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>動態(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)色功能

來了！真的來了！

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

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

我們一睹為快！

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

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

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

包括曝光、對比度、高光、陰影、白色與黑色

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

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

最為震撼的是

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

利用這個工具

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

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

改變色彩明度

控制色彩純度

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

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

從此以后

在手機(jī)上

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

制作精美影片

這！

就是「潑辣24」

你的移動視頻調(diào)色專家

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

熱點(diǎn)問題解答

一、什么時候會推出「潑辣24」的安卓版本和桌面版本？

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

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

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

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

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

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

四、我購買了「潑辣24」會員，但為何無法使用付費(fèi)濾鏡？

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

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

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

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

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

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

七、「潑辣24」會員到期后之前購買的濾鏡是否仍然可以使用？

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

八、「潑辣24」會員為什么會自動扣款？如何退訂和退款？

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

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

九、我希望制作某部電影的辣特濾鏡，請問如何告之你們？

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

LUT濾鏡及使用問題

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

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

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

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

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

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

四、什么是LUT？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

潑辣24功能簡介

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

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

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

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

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

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

? 便利「瞬時保存」模式，即錄即存無需等待

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

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

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

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

簡介

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

.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次。想象一下，對于一個大型項(xiàng)目，不同的CSS文件，如果哪天被要求更改顏色。我們可以做的最好快的方式就是“查找并替換”。

使用CSS變量，可以更快解決這個問題。定義變量名需要用--開頭。首先，我們現(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)槲覀冊?root元素中定義了它。但是，我們還可以將變量范圍限定到整個文檔中的某些元素。

命名變量

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

/* 合法命名 */
: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 變量也有自己的作用域，這個概念類似于其他編程語言。以 JS 為例:

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

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

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

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

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

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

下面是一個比較直觀的示例圖片，可以加強(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()有多個值。第二個#221只在變量--primary-color由于某種原因沒有定義的情況下有效。不僅如此，我們還可以將var()嵌套到另一個var()中。

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

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

用例一：控制組件的大小

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

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

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

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

通過在按鈕組件作用域內(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%;
}

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

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

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

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

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

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

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

用例四：CSS Grid

CSS 變量對于網(wǎng)格非常有用。假設(shè)希望網(wǎng)格容器根據(jù)定義的首選寬度顯示其子項(xiàng)。與為每個變體創(chuàng)建類并復(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)建一個完整的網(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 漸變

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

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

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

或者我們可以存儲一個值。以角度為例:

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

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

用例六：Background Position

我們可以在 CSS 變量中包含多個值，這在需要根據(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)站比以往任何時候都更需要深色和淺色模式。使用CSS變量，我們可以存儲它們的兩個版本，并根據(jù)用戶或系統(tǒng)偏好在它們之間切換。

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

/* 添加到`<html>`元素的類*/
.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由于某種原因失敗時，提供適當(dāng)?shù)哪J(rèn)值或后備值很重要。

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

auto值是 JS 失敗時的回退值，并且沒有定義CSS變量——details-height-open。

用例九：控制 wrapper 寬度

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

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

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

用例十一：動態(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

用例十二：用戶頭像

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

<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);
}

用例十三：媒體查詢

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

: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元素可以訪問變量--size，因?yàn)樗鼜母冈乩^承了它。很有趣,那它在實(shí)際的項(xiàng)目中有啥用呢？

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

改變一個變量就可以改變所有項(xiàng)的大小
間距應(yī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);
}

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

另一個有用的例子是使用CSS變量繼承來定制CSS動畫：

@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變量無效時，瀏覽器將根據(jù)所使用的屬性用初始值或繼承值替換。

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

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

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

該屬性是否可繼承？

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

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

網(wǎng)址值

我們可能無法控制網(wǎng)頁中的所有資源，其中一些必須在線托管。在這種情況下，您可以將鏈接的URL值存儲在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本身，因此無效。當(dāng)瀏覽器計(jì)算出該值時，該值將不再有效，并且將無法按預(yù)期運(yùn)行。

存儲多個值

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

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

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

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

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

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

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

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

@keyframes規(guī)則中的動畫變量

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

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;
  }
}

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

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

如果我們希望上述動畫能夠正常工作，則應(yīng)采用老式的方法。這意味著，我們需要用要設(shè)置動畫的實(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 大小會有不同的變化。我將默認(rèn)值設(shè)置為1，所以默認(rèn)大小為(30px * 30px)。注意不同的類變化以及更改--size值如何導(dǎo)致化身的大小變化。

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

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

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

Devtools和CSS變量

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

看到顏色

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

計(jì)算值

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

禁用CSS變量

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

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

作者：Ahmad Shadeed 譯者：前端小智來源：ishadeed

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

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS3 顏色值HSL表示方式&amp;amp;簡單

謂HSL

取值：

兼容性：

熱點(diǎn)問題解答

LUT濾鏡及使用問題

潑辣24功能簡介

簡介

命名變量

作用域

回退方案

用例一：控制組件的大小

用例二：CSS 變量和 HSL 顏色

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

用例四：CSS Grid

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

用例六：Background Position

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

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

用例九：控制 wrapper 寬度

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

用例十二：用戶頭像

用例十三：媒體查詢

用例十四：繼承

CSS 變量的工作方式

網(wǎng)址值

存儲多個值

@keyframes規(guī)則中的動畫變量

計(jì)算

Devtools和CSS變量

看到顏色

計(jì)算值

禁用CSS變量

您的項(xiàng)目需求

CSS3 顏色值HSL表示方式&簡單