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

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

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

色彩關鍵字

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

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

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

值得注意的是，未知的關鍵字會讓 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 的字面意思就是透明。它用來表示一個完全透明的顏色，即該顏色看上去將是背景色。