CSS3新增顏色屬性 · 致力于web前端技術撰寫

### CSS顏色屬性復習 color name 顏色英文名稱命名（如red,blue,pink,white等）? HEX方式十六進制方式（#FF0000，#B9B9B9等）? rgb方式三原色配色方式（rgb(255,0,00)）這幾種方式都是常用到的顏色屬性，本人使用較多的是HEX方式。CSS3中新增了幾種顏色屬性。 ### CSS3新增顏色屬性 1、RGBA模式? 2、HSL模式? 3、HSLA模式 **1、RGBA模式**? rgba在之前一遍博客中已經提及過，a表示的是透明度，取值范圍為0~1,rgb分別是紅綠藍三色，取值范圍均為0~255.? **2、HSL模式**? H： Hue(色調)。? 0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360? S： Saturation(飽和度)。取值為：0.0% - 100.0%? L： Lightness(亮度)。取值為：0.0% - 100.0%? **3、HSLA模式**? HSL與HSL模式的相同，增加A，即透明度? A: alpha 透明度 0~1之間 HSL的色輪如下：? ![](https://box.kancloud.cn/2016-04-07_570603fbb03de.jpg) 舉例看個HSLA ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> <style> div{width:100px;height:100px;background: HSLA(0,100%,60%,0.5);} </style> </head> <body> <div></div> </body> </html> ~~~ 效果：? ![](https://box.kancloud.cn/2016-04-07_570603fbd8e2f.jpg) 個人覺得HSL與RGB和HEX相比，顏色更容易記憶，但是鑒于通過我們都是使用取色器，所以覺得意義不大，還是會繼續使用RGBA和HEX方式。而HSL和HSLA僅是做一個了解。