color · 跟老司機學CSS3

**color** * 描述：設置對象顏色。 * 版本：CSS1 * 繼承性：有 **語法** ``` color: rgba(100, 20, 360, .3); ``` 顏色種類 * color name：設置顏色值為顏色名稱的顏色，比如：red。 * hex number：設置顏色值為十六進制值的顏色，比如：#ffff00。 * rgb number：設置顏色值為 rgb 值的顏色，比如：rgb(255,255,0)。 * r：紅色值，可用正整數或者百分數。 * g：綠色值，可用正整數或者百分數。 * b：藍色值，可用正整數或者百分數。 * rgba number：設置顏色值為 rgba 值的顏色，比如：rgba(125, 125, 0, .3)。 * a：Alpha 透明度。取值 0~1 之間。 * hsl number：設置顏色值為 hsl 值的顏色，比如：hsl(360, 50%, 50%)。 * h：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360 * s：Saturation(飽和度)。取值為：0.0% - 100.0% * l：Lightness(亮度)。取值為：0.0% - 100.0% * hsla number：設置顏色值為 hsla 值的顏色，比如：hsla(360, 50%, 50%, .3)。 * a：Alpha 透明度。取值 0~1 之間。 * transparent：全透明黑色的速記法，類似 rgba(0,0,0,0) 這樣的值。 **使用說明** 可以使用顏色名稱， hex, rgb, rgba, hsl, hsla, transparent 來設置。用顏色名稱設置顏色某些瀏覽器可能無法識別。 color 屬性值被間接用來提供一個中間值 currentColor 以供其他接受顏色值的屬性使用。 **代碼示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <style> #container{ width: 50px; height: 50px; border: 1px solid #000000; color: rgba(100, 20, 360, .6); } </style> </head> <body> <div id="container"> 你好 </div> </body> </html> ``` ![color](https://box.kancloud.cn/a697cc8a72d4ca92783858b2d1a04914_66x73.png)