【CSS進階】CSS 顏色體系詳解

說到 CSS 顏色，相比你們都不會陌生，本文是我我的對 CSS 顏色體系的一個系統總結與學習，分享給你們。

先用一張圖直觀的感覺一下與 CSS 顏色相關大概覆蓋了哪些內容。

接下來的行文內容大概會按照這個順序進行，內容十分基礎，可選擇性跳到相應內容處閱讀。

 

色彩關鍵字

嗯，色彩關鍵字很好理解。它表示一個具體的顏色值，且它不區分大小寫。譬如這樣 color:red 的 red 便是一個色彩關鍵字。

在 CSS3 以前，也就是 CSS 標準 2，一共包含了 17 個基本顏色，分別是：

而到了 CSS3，色彩關鍵字獲得了極大的擴充，達到了 147 個。下面僅僅是列出了一部分:

完整的 CSS3 色彩關鍵字戳我查看

值得注意的是，未知的關鍵字會讓 CSS 屬性無效。

這裏的這個測試 test3 是爲了說明，當傳入的色彩關鍵字錯誤，CSS 屬性將無效而不是使用當前的currentColor 替代。 currentColor會在下文說明。

哪些屬性能夠設置顏色

全部能夠用到顏色值的地方，均可以用色彩關鍵字替代，那麼在 CSS 中，什麼地方能夠用到顏色值呢？

• 文本的顏色 color:red

• 元素的背景色 background-color:red （包含各種漸變）

• 元素的邊框 border-color:red

• 元素的盒陰影或文字陰影 box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red

• 運用在一些濾鏡當中 filter: drop-shadow(16px 16px 20px red)

• <hr /> 水平線的顏色

一些沒法直接設置，可是能夠被獲得或者繼承當前元素 currentColor 的屬性：

• <img> 的 alt 文本。也就是，當沒法顯示圖像時，代替圖像出現的文本，會繼承這個顏色值。

• ul 列表項的小點

一些比較常見的就不舉例了，說一下 <hr/> 、 <img> 的 alt 文本和 ul 列表項的小點。

通過測試， <hr/>的顏色值，能夠經過設置它的 border 的顏色值來表示。

<img> 的 alt 文本和 ul 列表項的小點則會繼承當前元素 currentColor 的屬性。

對於表單控件 <input type="radio"> <input type="checkbox"> ，暫時沒有找到很好的直接改變顏色的方法，若是有知道但願不吝賜教。

 

transparent

transparent 的字面意思就是透明。它用來表示一個徹底透明的顏色，即該顏色看上去將是背景色。

也能夠理解爲它是 rgba(0,0,0,0) 的簡寫。

值得注意的是:

• 在 CSS3 以前，transparent 關鍵字不是一個真實的顏色，只能用於 background-color 和 border-color中，表示一個透明的顏色。而在支持 CSS3 的瀏覽器中，它被從新定義爲一個真實的顏色，transparent 能夠用於任何須要 color 值的地方，像 color 屬性。

那麼這個透明值有什麼用呢？簡單列舉一些例子：

transparent 用於 border，繪製三角形

這算是 transparent 最多見的一個用法，用於繪製三角形。

結合上圖圖一、圖2，能夠看到利用一個高寬爲 0 的 div，設置它的 border ，當任意三邊的 border 顏色爲 transparent 時，則能夠獲得任意朝向的一個三角形。

像上文說的，因爲 transparent 在低版本瀏覽器中（IE78）可使用在 border、background 中，因此此方法兼容性很好，能夠利用於不少場景。

 

transparent 用於 border，實現增大點擊熱區

按鈕是咱們網頁設計中十分重要的一環，而按鈕的設計也與用戶體驗息息相關。讓用戶更容易的點擊到按鈕無疑能很好的增長用戶體驗，尤爲是在移動端，按鈕一般都很小，可是有時因爲設計稿限制，咱們不能直接去改變按鈕元素的高寬。那麼這個時候有什麼辦法在不改變按鈕本來大小的狀況下去增長他的點擊熱區呢？

這裏，藉助透明的 border 能夠輕鬆幫咱們實現（我 以前一篇文章寫到過，利用僞元素也能夠實現），利用一層透明的 border:20px solid transparent 咱們能夠這樣寫：

試着將光標靠近 Btn，會發如今還未到達有顏色區域以前，就已經觸發了鼠標的交互響應事件 hover，利用這一點在移動端能夠很好的擴大按鈕的可點擊區域又不至於改變按鈕自己的形狀。像這樣：

嗯哼，這裏咱們將 border 用於了擴大鼠標點擊區域，然而真實狀況是有的時候咱們的按鈕必需要用到 border，而 border 又只能設置一重（沒法像 box-shadow和 漸變同樣設置多重 border），這個時候若是還須要運用這種方法，可使用內陰影 box-shadow模擬一層 border，像這樣：

 

transparent 用於 background，繪製背景圖

transparent 用於 background，一般能夠製造出各類各樣的背景圖像。這裏舉個簡單的例子，利用透明漸變，實現一個切角圖形：

經過 線性漸變 linear-gradient 實現從透明色到實色的變化，將四個四分之一大小（ background-size: 50% 50%）的圖形組合在一塊兒，就生成了一個切角圖形。

利用 transparent 與漸變的配合還能生成各類各樣美妙的圖形，能夠戳下面看看：

• CSS3奇思妙想

• CSS3 Patterns Gallery

 

transparent 用於文本 color

配合 box-shadow ，在文本上運用 transparent，能夠營造出一種文字發光的效果，鼠標 hover 下面的文字試試：

transparent 其實還有不少做用，暫且說這麼多，歡迎繼續討論。

 

currentColor

不少人都不知道還有 currentColor 這個東東。和 transparent 同樣，它也是一個關鍵字，顧名思義，它表示當前顏色。它來自自屬性或者繼承於它的父屬性。

能夠簡單的理解爲當前 CSS 標籤所繼承或設定的文本顏色，即 color 的值。

那它具體能夠怎麼用呢，根據咱們書寫 CSS 的原則 DRY(Don’t Repeat Yourself)，使用這個關鍵字能夠很好的減小改動 CSS 時的工做量。看個例子：

上面的例子，我只在 color 裏寫了顏色，在 border 和 box-shadow 中使用了 currentColor 屬性。能夠看到，這兩個屬性的顏色值都被設置爲了 color 中設置的值，當咱們須要用到這種同色表現的時候，使用 currentColor 更佳，方便往後改動。

可是，currentColor 是 CSS3 新增的，在老版本瀏覽器下是沒法識別的。那麼是否在老版本瀏覽器下就沒法使用了呢，也不盡然，仍是有一些特例的，看看下面這個：

能夠看到，上面我只在 color 裏寫了顏色，border 的值爲 1px solid，box-shadow 也是，並無帶上顏色值，可是依然表現爲了 currentColor 的值。這是由於邊框顏色和陰影顏色默認就是當前盒子的文本顏色，其中 border 兼容性很好，能夠支持到 IE6 。

固然 border 和 box-shadow 是特例，不是全部須要填寫顏色值的屬性不填寫都會默認繼承文本的值的。

那麼元素中將會獲得或者繼承元素 color 值有哪些呢：

1. 元素的文本內容
2. 文本的輪廓
3. 元素的邊框
4. 元素的盒陰影
5. filter:drop-shadow()
6. <img> 的 alt 文本。也就是，當沒法顯示圖像時，代替圖像出現的文本，會繼承這個顏色值。
7. 列表項的小黑點和邊框
8. 一些瀏覽器（好比Chrome）水平線（ <hr>）的邊框顏色。（沒有邊框的話，顏色就不會受影響）。

currentColor 的兼容性

 

rgb() 與 rgba()

顏色表示模型的話，簡單瞭解一下。

rgb() 表示顏色的紅-綠-藍（red-green-blue (RGB)）模式，rgba() 多一個 a ，表示其透明度，取值爲 0-1。

rgb 的顏色模型一般由一個立方體表示：

咱們知道，一般咱們使用的時候，不使用縮寫的話，使用十六進制符號 #RRGGBB,

在 #RRGGBB 中，RR 表示 紅色的深淺，GG 表示綠色的深淺，BB 表示藍色的深淺。取值都是從 00 - FF，值越大表示該顏色越深。

若是採用 rgb(RR,GG,BB) 的寫法，RR 取值 0~255 或者百分比，255 至關於 100%，和十六進制符號裏的 F 或 FF 。

瞭解了 rgb() 的含義的話，記住經常使用的顏色值實際上是很容易的，像上面說的 RR 表示紅色的深淺，那麼理解記憶 #FF0000 表示爲紅色就 so easy 了，同理能夠獲得 #00FF00 表示綠色， #0000FF表示藍色。

再記住顏色的疊加原理：

咱們就能夠輕鬆的記住， #FF00FF紅藍疊加表示紫色， #FFFF00紅綠疊加表示黃色， #00FFFF藍綠疊加表示青色。

 

hsl() 與 hsla()

除了 rgb 表示法，顏色也可使用 hsl() 表示。hsl()被定義爲色相-飽和度-明度（Hue-saturation-lightness），hsla() 多一個 a ，表示其透明度，取值爲 0-1。。

hsl 相比 rgb 的優勢是更加直觀：你能夠估算你想要的顏色，而後微調。它也更易於建立相稱的顏色集合。

hsl 的顏色模型一般由一個圓柱體表示：

• 色相（H）是色彩的基本屬性，就是日常所說的顏色名稱，如紅色、黃色等。
• 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數值。
• 明度（V），亮度（L），取0-100%。

其實對於咱們前端而言，使用 hsl 表示顏色會更方便。

以一個按鈕爲例，咱們用 hsl 顏色表示法表示按鈕 normal 狀態下的背景色值，咱們但願 hover 的時候，背景色暗一點，而 active 的時候背景色亮一點。若是採用 rgb 表示法，咱們須要 3 個徹底不同的顏色，而採用 hsl 表示法，咱們只須要在 hover 和 active 的時候去改的 顏色值的 l （即Light，亮度）值便可。運用上面出現過的一個例子再看看：

這裏 background:hsl(200, 60%, 60%) 在 hover 和 active 的時候，我只改動了 hsl 顏色值的第三個值達到了咱們但願的效果。

rgb 到 hsl 的轉換

這裏有個小 tips 可能有些人不知道，在開發階段咱們只有一個 rgb 值，可是但願轉換成 hsl 值，使用 chrome 開發者工具能夠很便捷的作到，以下圖，咱們只須要選中咱們想轉換的顏色值，按住鍵盤左 shift，點擊這個顏色表示框，便可進行轉換：

 

到此本文結束，比較基礎，但願有人看。若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

若是本文對你有幫助，請點下推薦，寫文章不容易，轉載請註明出處，並貼出原文連接。