【CSS進(jìn)階】CSS 顏色體系詳解
（給前端大學(xué)加星標(biāo)，提升前端技能.）
作者：ChokCoco
https://www.cnblogs.com/coco1s/p/5622534.html
說到 CSS 顏色，相比大家都不會(huì)陌生，本文是我個(gè)人對(duì) CSS 顏色體系的一個(gè)系統(tǒng)總結(jié)與學(xué)習(xí)，分享給大家。
先用一張圖直觀的感受一下與 CSS 顏色相關(guān)大概覆蓋了哪些內(nèi)容。
接下來的行文內(nèi)容大概會(huì)按照這個(gè)順序進(jìn)行，內(nèi)容十分基礎(chǔ)，可選擇性跳到相應(yīng)內(nèi)容處閱讀。
?
色彩關(guān)鍵字
嗯，色彩關(guān)鍵字很好理解。它表示一個(gè)具體的顏色值，且它不區(qū)分大小寫。譬如這樣?color:red?的 red 即是一個(gè)色彩關(guān)鍵字。
在 CSS3 之前，也就是 CSS 標(biāo)準(zhǔn) 2，一共包含了 17 個(gè)基本顏色，分別是：
而到了 CSS3，色彩關(guān)鍵字得到了極大的擴(kuò)充，達(dá)到了 147 個(gè)。下面僅僅是列出了一部分:
值得注意的是，未知的關(guān)鍵字會(huì)讓 CSS 屬性無效。
這里的這個(gè)測試 test3 是為了說明，當(dāng)傳入的色彩關(guān)鍵字錯(cuò)誤，CSS 屬性將無效而不是使用當(dāng)前的currentColor?替代。?currentColor會(huì)在下文說明。
哪些屬性可以設(shè)置顏色
所有可以用到顏色值的地方，都可以用色彩關(guān)鍵字替代，那么在 CSS 中，什么地方可以用到顏色值呢？
文本的顏色?
color:red元素的背景色?
background-color:red?（包含各類漸變）元素的邊框?
border-color:red元素的盒陰影或文字陰影?
box-shadow:0 0 0 1px red?|?text-shadow:5px 5px 5px red運(yùn)用在一些濾鏡當(dāng)中?
filter: drop-shadow(16px 16px 20px red)
一些無法直接設(shè)置，但是可以被得到或者繼承當(dāng)前元素 currentColor 的屬性：
?的 alt 文本。也就是，當(dāng)無法顯示圖像時(shí)，代替圖像出現(xiàn)的文本，會(huì)繼承這個(gè)顏色值。ul 列表項(xiàng)的小點(diǎn)
一些比較常見的就不舉例了，說一下??的 alt 文本和 ul 列表項(xiàng)的小點(diǎn)。
經(jīng)過測試，?
?的 alt 文本和 ul 列表項(xiàng)的小點(diǎn)則會(huì)繼承當(dāng)前元素 currentColor 的屬性。
對(duì)于表單控件???，暫時(shí)沒有找到很好的直接改變顏色的方法，如果有知道希望不吝賜教。
?
transparent
transparent 的字面意思就是透明。它用來表示一個(gè)完全透明的顏色，即該顏色看上去將是背景色。
也可以理解為它是?rgba(0,0,0,0)?的簡寫。
值得注意的是:
在 CSS3 之前，transparent 關(guān)鍵字不是一個(gè)真實(shí)的顏色，只能用于?
background-color?和?border-color中，表示一個(gè)透明的顏色。而在支持 CSS3 的瀏覽器中，它被重新定義為一個(gè)真實(shí)的顏色，transparent 可以用于任何需要?color?值的地方，像 color 屬性。
那么這個(gè)透明值有什么用呢？簡單列舉一些例子：
transparent 用于 border，繪制三角形
這算是 transparent 最常見的一個(gè)用法，用于繪制三角形。
結(jié)合上圖圖1、圖2，可以看到利用一個(gè)高寬為 0 的 div，設(shè)置它的 border ，當(dāng)任意三邊的 border 顏色為 transparent 時(shí)，則可以得到任意朝向的一個(gè)三角形。
像上文說的，由于 transparent 在低版本瀏覽器中（IE78）可以使用在 border、background 中，所以此方法兼容性很好，可以利用于很多場景。
transparent 用于 border，實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)
按鈕是我們網(wǎng)頁設(shè)計(jì)中十分重要的一環(huán)，而按鈕的設(shè)計(jì)也與用戶體驗(yàn)息息相關(guān)。讓用戶更容易的點(diǎn)擊到按鈕無疑能很好的增加用戶體驗(yàn)，尤其是在移動(dòng)端，按鈕通常都很小，但是有時(shí)由于設(shè)計(jì)稿限制，我們不能直接去改變按鈕元素的高寬。那么這個(gè)時(shí)候有什么辦法在不改變按鈕原本大小的情況下去增加他的點(diǎn)擊熱區(qū)呢？
這里，借助透明的 border 可以輕松幫我們實(shí)現(xiàn)（我?之前一篇文章寫到過，利用偽元素也可以實(shí)現(xiàn)），利用一層透明的?border:20px solid transparent?我們可以這樣寫：
試著將光標(biāo)靠近?Btn，會(huì)發(fā)現(xiàn)在還未到達(dá)有顏色區(qū)域之前，就已經(jīng)觸發(fā)了鼠標(biāo)的交互響應(yīng)事件?hover，利用這一點(diǎn)在移動(dòng)端可以很好的擴(kuò)大按鈕的可點(diǎn)擊區(qū)域又不至于改變按鈕本身的形狀。像這樣：
嗯哼，這里我們將?border?用于了擴(kuò)大鼠標(biāo)點(diǎn)擊區(qū)域，然而真實(shí)情況是有的時(shí)候我們的按鈕必須要用到 border，而 border 又只能設(shè)置一重（無法像?box-shadow和?漸變一樣設(shè)置多重 border），這個(gè)時(shí)候如果還需要運(yùn)用這種方法，可以使用內(nèi)陰影?box-shadow模擬一層 border，像這樣：
div{width:140px;line-height:48px;text-align:center;margin:50px auto;color:hsla(328, 100%, 54%,0.8);cursor:pointer;border:20px solid transparent;background-clip: padding-box;box-shadow:inset 0 0 0 1px hsla(328, 100%, 54%,0.8);}div:hover{background:hsla(328, 100%, 54%,0.8);color:white;background-clip: padding-box;}div:active{background:hsla(328, 100%, 54%,1);color:white;background-clip: padding-box;}
transparent 用于 background，繪制背景圖
transparent 用于 background，通常可以制造出各種各樣的背景圖像。這里舉個(gè)簡單的例子，利用透明漸變，實(shí)現(xiàn)一個(gè)切角圖形：
div{width: 160px;margin:30px auto;padding: 60px 20px;text-align: center;color: #fff;font-size: 200%}div{background:linear-gradient(135deg, transparent 15px, #ff1493 0) top left,linear-gradient(-135deg, transparent 15px, #ff1493 0) top right,linear-gradient(-45deg, transparent 15px, #ff1493 0) bottom right,linear-gradient(45deg, transparent 15px, #ff1493 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat}
通過?線性漸變 linear-gradient?實(shí)現(xiàn)從透明色到實(shí)色的變化，將四個(gè)四分之一大小（?background-size: 50% 50%）的圖形組合在一起，就生成了一個(gè)切角圖形。
利用 transparent 與漸變的配合還能生成各種各樣美妙的圖形，可以戳下面看看：
CSS3奇思妙想
CSS3 Patterns Gallery
?
transparent 用于文本 color
配合 box-shadow ，在文本上運(yùn)用 transparent，可以營造出一種文字發(fā)光的效果，鼠標(biāo) hover 下面的文字試試：
div{width:360px;line-height:38px;margin:50px auto;font-size:24px;color:#333;transition: .5s;cursor:pointer;}div:hover{color: transparent;text-shadow:0 0 1px white,0 0 3px white;}body{background:#999;}
transparent 其實(shí)還有很多作用，暫且說這么多，歡迎繼續(xù)討論。
?
currentColor
很多人都不知道還有?currentColor?這個(gè)東東。和 transparent 一樣，它也是一個(gè)關(guān)鍵字，顧名思義，它表示當(dāng)前顏色。它來自自屬性或者繼承于它的父屬性。
可以簡單的理解為當(dāng)前 CSS 標(biāo)簽所繼承或設(shè)定的文本顏色，即 color 的值。
那它具體可以怎么用呢，根據(jù)我們書寫 CSS 的原則 DRY(Don’t Repeat Yourself)，使用這個(gè)關(guān)鍵字可以很好的減少改動(dòng) CSS 時(shí)的工作量?？磦€(gè)例子：
div{width:200px;line-height:60px;margin:50px auto;font-size:24px;text-align:center;color:deeppink;border:1px solid currentColor;box-shadow:0px 0px 1px 1px currentColor;}
上面的例子，我只在 color 里寫了顏色，在 border 和 box-shadow 中使用了 currentColor 屬性?？梢钥吹?，這兩個(gè)屬性的顏色值都被設(shè)置為了 color 中設(shè)置的值，當(dāng)我們需要用到這種同色表現(xiàn)的時(shí)候，使用 currentColor 更佳，方便日后改動(dòng)。
但是，currentColor 是 CSS3 新增的，在老版本瀏覽器下是無法識(shí)別的。那么是否在老版本瀏覽器下就無法使用了呢，也不盡然，還是有一些特例的，看看下面這個(gè)：
div{width:200px;line-height:60px;margin:50px auto;font-size:24px;text-align:center;color:#ff00ff;border:1px solid;box-shadow:0px 0px 1px 1px;}
可以看到，上面我只在 color 里寫了顏色，border 的值為?1px solid，box-shadow 也是，并沒有帶上顏色值，但是依然表現(xiàn)為了 currentColor 的值。這是因?yàn)檫吙蝾伾完幱邦伾J(rèn)就是當(dāng)前盒子的文本顏色，其中 border 兼容性很好，可以支持到 IE6 。
當(dāng)然 border 和 box-shadow 是特例，不是所有需要填寫顏色值的屬性不填寫都會(huì)默認(rèn)繼承文本的值的。
那么元素中將會(huì)得到或者繼承元素 color 值有哪些呢：
元素的文本內(nèi)容
文本的輪廓
元素的邊框
元素的盒陰影
filter:drop-shadow()
?的 alt 文本。也就是，當(dāng)無法顯示圖像時(shí)，代替圖像出現(xiàn)的文本，會(huì)繼承這個(gè)顏色值。列表項(xiàng)的小黑點(diǎn)和邊框
一些瀏覽器（比如Chrome）水平線（?
?
rgb() 與 rgba()
顏色表示模型的話，簡單了解一下。
rgb() 表示顏色的紅-綠-藍(lán)（red-green-blue (RGB)）模式，rgba() 多一個(gè) a ，表示其透明度，取值為 0-1。
rgb 的顏色模型通常由一個(gè)立方體表示：
我們知道，通常我們使用的時(shí)候，不使用縮寫的話，使用十六進(jìn)制符號(hào) #RRGGBB,
在 #RRGGBB 中，RR 表示 紅色的深淺，GG 表示綠色的深淺，BB 表示藍(lán)色的深淺。取值都是從 00 - FF，值越大表示該顏色越深。
如果采用 rgb(RR,GG,BB) 的寫法，RR 取值 0~255 或者百分比，255 相當(dāng)于 100%，和十六進(jìn)制符號(hào)里的 F 或 FF 。
了解了 rgb() 的含義的話，記住常用的顏色值其實(shí)是很容易的，像上面說的 RR 表示紅色的深淺，那么理解記憶?#FF0000?表示為紅色就 so easy 了，同理可以得到?#00FF00?表示綠色，?#0000FF表示藍(lán)色。
再記住顏色的疊加原理：
我們就可以輕松的記住，?#FF00FF紅藍(lán)疊加表示紫色，?#FFFF00紅綠疊加表示黃色，?#00FFFF藍(lán)綠疊加表示青色。
hsl() 與 hsla()
除了 rgb 表示法，顏色也可以使用 hsl() 表示。hsl()被定義為色相-飽和度-明度（Hue-saturation-lightness），hsla() 多一個(gè) a ，表示其透明度，取值為 0-1。。
hsl 相比 rgb 的優(yōu)點(diǎn)是更加直觀：你可以估算你想要的顏色，然后微調(diào)。它也更易于創(chuàng)建相稱的顏色集合。
hsl 的顏色模型通常由一個(gè)圓柱體表示：
色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。
明度（V），亮度（L），取0-100%。
其實(shí)對(duì)于我們前端而言，使用 hsl 表示顏色會(huì)更方便。
以一個(gè)按鈕為例，我們用 hsl 顏色表示法表示按鈕 normal 狀態(tài)下的背景色值，我們希望 hover 的時(shí)候，背景色暗一點(diǎn)，而 active 的時(shí)候背景色亮一點(diǎn)。如果采用 rgb 表示法，我們需要 3 個(gè)完全不一樣的顏色，而采用 hsl 表示法，我們只需要在 hover 和 active 的時(shí)候去改的 顏色值的 l （即Light，亮度）值即可。運(yùn)用上面出現(xiàn)過的一個(gè)例子再看看：
div{width:140px;line-height:48px;text-align:center;margin:50px auto;color:#333;cursor:pointer;background:hsl(200, 60%, 60%);border:20px solid transparent;background-clip: padding-box;}div:hover{background:hsl(200, 60%, 50%);background-clip: padding-box;}div:active{background:hsl(200, 60%, 70%);background-clip: padding-box;}
這里?background:hsl(200, 60%, 60%)?在 hover 和 active 的時(shí)候，我只改動(dòng)了 hsl 顏色值的第三個(gè)值達(dá)到了我們希望的效果。
rgb 到 hsl 的轉(zhuǎn)換
這里有個(gè)小 tips 可能有些人不知道，在開發(fā)階段我們只有一個(gè) rgb 值，但是希望轉(zhuǎn)換成 hsl 值，使用 chrome 開發(fā)者工具可以很便捷的做到，如下圖，我們只需要選中我們想轉(zhuǎn)換的顏色值，按住鍵盤左?shift，點(diǎn)擊這個(gè)顏色表示框，即可進(jìn)行轉(zhuǎn)換：
到此本文結(jié)束，比較基礎(chǔ)，希望有人看。如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
??愛心三連擊
點(diǎn)分享 點(diǎn)點(diǎn)贊 點(diǎn)在看
