css3Color

css

css中有三种表示颜色的方式，第一种是关键字，第二种是RGB()，第三种是HSL()。后两种具体的原理还有待深挖。。。先说说咋用吧。。。

第一种：关键字

  • 没啥好说的，css1的16种+css2的orange,超出的关键字颜色将被忽略.
  • transparent ：rgb(0,0,0,0)的shorthand，即完全透明，即显示背景色。
  • currentColor ：
    currentColor此关键可以用于任何可接受颜色的属性上，比如border-color，background-color等等，
    当使用currentColor时，表示的值为当前元素的color属性值，若当前元素没有color值，则继承自父元素的color属性值，直至根元素的color值。
    当前元素的color属性发生变化时，当前元素的currentColor值也会相应发生变化。

第二种：rgb():

1
2
3
4
5
6
7
8
1,rgb(R,G,B),R、G、B是三原色red，green，blue的简称，可以搭配成其他的颜色。
2,R、G、B是三个同时为integer的值或者三个同时为percentage的值，integer值在0~255之间，percentage自然是0%~100%，对应以#开头，三位或者6位十六进制数字组成的颜色值。即255 <—> FF(F) <—> 100%
3，rgba(R,G,B,Alpha):css3中为rgb加了一个值为0~1的alpha参数，用来表示透明度
IE6-8不支持rgba模式，可以用filter滤镜实现：
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000); 
前两位为透明度，后六位为色值。

第二种：hsl():

1
2
3
4
5
6
7
1,hsl(H,S,L)是色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
2,H实际取值范围为0~360，超出这个范围的相当于在0~360圆环色彩中取值。
3,S、L取值范围为0%~100%，S越大，颜色中的灰色越少，色彩越鲜艳；L越小，越接近黑色，越大也接近白色。
4,hsla()与agba()同理，多了一位透明度的参数。

奉上某处偷来的web安全色,web安全色就是在不同浏览器之间渲染差异较小的颜色（受硬件影响不同设备显示的颜色可能会有不同）