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)