「進擊的前端工程師」CSS色彩揭祕

往往說起色彩，我總會想起蘇軾的一年好景君須記，正是橙黃橘綠時，白居易的日出江花紅勝火，春來江水綠如藍，朱熹的等閒識得東風面，萬紫千紅老是春。

也許世界本無色彩。

古人曾用詩詞賦予了這個世界色彩，而現在是物理的光學讓咱們認識到了色彩。那麼本文將帶你揭祕CSS中的色彩。

先贊在看，養成習慣！

CSS中的color

CSS1只支持16個基本顏色關鍵字

CSS2在CSS1的基礎上添加了橙色orange

CSS3增長了147個關鍵字

CSS4只增長了一個關鍵字 rebeccapurple

連接：CSS3中新增147個顏色關鍵字

我知道你會說這個CSS4的新增的一個關鍵字rebeccapurple是什麼鬼？還嫌我英文單詞記的不夠多嗎？搞個這麼難記的東西出來？

但實際上，CSS的做者Eric Meyer 的女兒麗貝卡死於腦癌，享年六歲。這是她最喜歡的顏色。

麗貝卡紫

連接：爲了記念 Eric Meyer 的女兒，色值 #663399 在 CSS4 中被定義爲 「rebeccapurple」

冰冷嚴謹的代碼中充滿了如此溫情之舉，你值得記憶。

RGB

三原色理論告訴咱們，紅、綠、藍三種顏色的光能夠構成全部的顏色。

爲何是這三種顏色呢？

由於人類的視神經對這三種顏色比較敏感。

現代計算機中用0-255的數字來表示每一種顏色。在RGB顏色表示方法中，三色數值最大的就是白色，三色數值爲0則表示黑色。理解起來也比較符合人類的認知，紅綠藍三種顏色的光混合起來就是白光，沒有光就是黑色。

除此以外，咱們須要注意兩點：

1.rgb數值格式只能是整數，不能是小數。

2.還能夠用百分比來進行表示，百分比範圍0%-100%

RGB表示法

#div {background-color:rgb(255,0,0);} /* 紅 */
#div {background-color:rgb(0,255,0);} /* 綠 */
#div {background-color:rgb(0,0,255);} /* 藍 */
複製代碼

16進製表示法 HEX

十六進制顏色實際上和rgb顏色是近親，都歸屬於rgb顏色，只是進制有差別。

#div {background-color:#FF0000;} /* 紅 */
#div {background-color:#00FF00;} /* 綠 */
#div {background-color:#0000FF;} /* 藍 */
複製代碼

RGBA

RGBA是在RGB的擴展，增長了一個Alpha的色彩通道，規定了透明度(取值範圍0～1)，0表示全透明。

RGBA代碼

div {background:rgba(255,0,0,0.5);}
複製代碼

RGBA與opacity的區別？

opacity是屬性，rgba()是函數，計算以後是個屬性值。

rgba通常修改的是背景色或者文本的顏色，內容不會繼承透明度。

opacity做用於元素和元素的內容，內容會繼承透明度。

HSL

人類對顏色的感知是遠遠大於紅、綠、藍的，所以HSL顏色模型被設計出來。

HSL分別表明色相，純度以及明度，也有色調、飽和度、亮度的說法。

h表示hue，取值0-360。大體按照紅橙黃綠青藍紫變化 0 (或 360) 爲紅色, 120 爲綠色, 240 爲藍色

s表示saturation，用0-100%表示。值越大，飽和度越高，顏色越亮 0%爲灰色，100%爲全色

l表示lightness，用0-100%表示。值越高，顏色越亮，100%是白色，50%是正常亮度，0%就是黑色

HSLA

如同RGBA模式是RGB的擴展模式，HSLA模式是HSL的擴展模式，在HSL的基礎上增長一個透明通道Alpha來設置透明度。

CMYK

回憶起兒時美術老師(咱們區的美術協會主席)曾經教過，顏料的三原色是「紅黃藍」。

而顏料可以顯示顏色的原理是它吸取了全部別的顏色的光，只返回一種色彩。這個世界就是這麼魔幻，你看到的不必定是你看到的。

顏料三原色是紅、綠、藍的補色，也能夠叫它們「品紅、黃、青」。這種顏色表示法就叫作CMYK。

熟悉UI設計的同窗們必定知道，在印刷業，就是採用顏料三原色來配置油墨。不過除了品紅、黃、青外，由於黑色顏料經常使用而且價格低廉，因此被單獨指定。

transparent

transparent用來指定全透明色彩，咱們能夠利用這個屬性畫出三角形。

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #ff0000;
}
複製代碼

<div class="triangle"></div>
複製代碼

transparent也比較魔幻，background-color:transparent包括IE6都支持，boder-color:transparent從IE7開始支持，可是color:transparent卻從IE9瀏覽器開始支持。

currentColor

currentColor的意思是使用當前color的計算值，也從IE9+才支持。

CSS中不少的屬性值默認就是currentColor的表現。

div {
  color: red;
  border: 1px solid;
}
複製代碼

通常狀況下無須多此一舉的添加currentColor。

div {
  color: red;
  border: 1px solid currentColor;
}
複製代碼

兼容性查詢

授人以魚不如授人以漁。

你們能夠去這個網站查找你所要用的屬性在瀏覽器中的兼容性。

❤️愛心三連擊

1.看到這裏了就點個贊支持下吧，你的贊是我創做的動力。

2.關注公衆號前端食堂，你的前端食堂，記得按時吃飯！

3.特殊階段，帶好口罩，作好我的防禦。