CSS，給你點「顏色「看看

對於CSS顏色，想必你們都或多或少用過，本文是筆者整理的關於CSS顏色相關的一些基礎知識，目的是但願在須要用到CSS顏色相關知識時，看這一篇就夠了。

下面多圖預警，就是要給你一點「顏色「看看（偷笑ing）。

本篇主要包含如下內容：

• CSS顏色體系包含哪些成員？
• HTML頁面哪些屬性能夠設置顏色？
• CSS顏色體系中那些被忽略的王者成員
• 總結

閒話少說，咱們開門見山：

1、CSS顏色體系包含哪些成員？一張圖。

幾點說明：

1. 顏色關鍵字，CSS3中新增147個顏色關鍵字，詳情請見www.w3school.com.cn/cssref/css_…

2. HEX，格式如#RRGGBB，其中RR、GG、BB取值00-FF。

3. RGB與RGB，即Red-Green-Blue-Alpha，紅色，綠色，藍色，透明度。前三個取值從0-255或0%-100%，alpha取值0-1。

4. HSL與HSLA，即Hue-Saturation-Lightness-Alpha，色調，飽和度，亮度，透明度，H取值從0-360，其中 0（360）表示紅色，120表示綠色，240表示藍色，S和L取0%-100%，alpha取值0-1。
   

5. transparent，子元素不會繼承該屬性（區別於opacity:0，opacity會被子元素繼承）。
   

6. currentColor表示當前標籤所設定或所繼承的文字顏色，若是當前標籤訂義了color屬性，則currentColor等於color屬性值，若是沒定義color屬性，則繼承父節點的color屬性值。
   

2、HTML頁面哪些屬性能夠設置顏色？一張圖

針對以上HTML元素，都可設置顏色值。那麼在實際工程中是怎樣用的呢？一圖勝千言。

圖1

圖2

圖3

須要注意的幾點：

1. 當同一個元素被賦予多個class樣式時，真正起做用的樣式是style sheet中最後定義的類，因此下圖文字爲綠色，如圖1。
2. 當background-color與background同時被賦值時，background樣式優先級高於background-color，與兩者在style sheet中定義的前後位置無關，如圖2。
3. 其中border、box-shadow、text-shadow默認爲當前盒子的文本顏色。

簡單使用如上，青銅級別的用法。只要記住屬性名，顏色值怎麼表示就夠了，通常狀況下推薦使用hsla顏色值，比較靈活，網上也有不少在線互轉的工具。

下面來介紹兩個比較重要的顏色值，王者登場。

3、CSS顏色體系中那些被忽略的王者成員

1. transparent，表示徹底透明的顏色，比較常見的用法以下：

• 繪製三角形，利用div寬高爲0，設置border寬度來實現。

• 移動端擴大按鈕的可點擊區域，設置border-box: 20px solid transparent;
• 配合CSS transition，製造發光的效果

• 配合CSS linear-gradient，設置背景

2. currentColor，表示當前標籤所繼承的文字顏色，常見用法以下：

• 簡化代碼，能夠方便控制圖形變化。

• 還可應用於svg fill屬性。

4、總結

本文主要是總結了HTML元素設置顏色值相關的基礎知識，但願能幫助到同窗們。後面會不按期總結前端相關基礎知識，在前端越走越遠的路上，與你們同行。