CSS3——颜色

一、颜色模式

随着CSS和浏览器的技术发展，CSS可以支持更多的颜色模式，包括在RGB颜色模式基础上增加透明度通道的RGBA模式和HSLA颜色模式。

1、RGBA模式

RGB是计算机通用的一种颜色模式，然是Red、Green、Blue3个单词的缩写，红、绿、蓝是光的三原色 。其中每一个像素的RGB分量分配在一个0~255的范围内。

RGBA实际上就是在RGB的基础上添加了一个Alpha透明通道，可以表现颜色的透明度。

Alpha通道可以用百分比、整数或者像RGB参数那样用0~1的实数表示。

在CSS中其相关的使用示例：

background: rgba(255, 255, 255, 0.5);

注意：IE6及之前的浏览器是不支持RGBA的，不过可以使用IE特有的滤镜来添加透明效果。

2、HSLA模式

和RGB、RGBA一样，HSLA也是一种色彩模式，不过在浏览器支持上不如RGB和RGBA。因此实际工作中，这种颜色表示法应用较少。

HSLA 的四个字母分别代表色调（Hue）、饱和度（Saturation）、亮度（Light）、透明通道（Alpha）。
具体的相关解释为：

• Hue（色调）：0（或360）表示红色，120表示绿色，240表示蓝色，可取其他数值来表示其他颜色。
• Saturation（饱和度）：取值为0%~100%之间的值。
• Ligthness（亮度）：取值为0%~100%之间的值。
• alpha（透明度）：取值在0~1之间。

注意：IE8及以下的浏览器不支持HSLA颜色表示法。

二、透明颜色

在CSS3中新增了opacity属性来解决单独设置相关透明度的问题。

opacity接受小于等于1的小数作为参数，不接受百分比，opacity默认为1，同时其还能接受inherit，用于继承父元素的透明度。

注意：IE8及更低版本的IE浏览器不支持该属性，不过可以使用滤镜来代替。

相关代码示例如下所示：

.image {
	filter: Alpha(Opacity = 20); /*IE兼容代码，应用IE中特有的滤镜效果*/
	opacity: 0.2;
}

三、语法糖——currentColor属性

currentColor实际上是CSS中的一个语法糖，IE9之前的浏览器不支持该属性，因此实际应用非常少。currentColor的意思是和当前文字颜色相同。

如果定义了color属性，那么在定义background、border，以及子元素所有和颜色相关的属性时，就都可以使用currentColor属性了。

说明：语法糖指那些对语言的功能并没有影响，却更简短或方便的用法。

四、渐变

1、线性渐变（linear-gradient)

线性渐变可以设置3个参数值：方向、起始颜色、结束颜色。最简单的模式是只需要定义起始颜色和结束颜色，起点、终点和方向默认自元素的顶部到底部。

如果在一些旧版本的浏览器（除IE）下可以正常显示，需要添加兼容代码，相关的兼容代码如下所示：

.test {
        background: -webkit-linear-gradient(left, red, blue);
        background: -o-linear-gradient(right, red, blue);
        background: -moz-linear-gradient(right, red, blue);
        background: linear-gradient(to right, red, blue);
    }

注意：标准写法的渐变方向格式如上例中的”to right“，在火狐和Opera浏览器中使用right，而对于webkit核心浏览器则使用起点位置left来表示。

渐变方向还可以使用角度来表示，0deg、90deg、180deg和270deg分别对应to top、to right、to buttom和to left。

在线性渐变上不只支持两种颜色的渐变，还可以添加任意种颜色。

2、放射渐变（radial-gradient)

线性渐变是从一个方向相对方向的色彩渐变效果，放射渐变则表示从中心向外发散的色彩渐变效果。它的基本效果只需要定义渐变的颜色即可。

注意：其相关的浏览器兼容代码的写法于linear-gradient类似，在此处只对其相关的标准代码进行举例：

background: radial-gradient(red, green, blue);

如果只指定颜色，则其颜色将均匀进行渐变，还可以为渐变加上渐变位置来改变不同颜色所占据的比例，例如：

background: radial-gradient(red 10%, green 20%, blue 50%);

同时还可以指定发散中心的位置，例如：

background: radial-gradient(buttom left, red 10%, green 20%, blue 50%);

加上buttom left表示发散中心的位置位于左下角，还可以使用百分比来指定横纵坐标位置。

radial-gradient的相关选项除了颜色、渐变位置、中心点位置外还有一些其他的参数可以添加。

• 形状：有circle（圆形、默认）和ellipse（椭圆）两个选项。
• 尺寸。

放射性渐变范围的可选参数

closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最远的角
contain	包含，指定径向渐变的半径长度为从圆心到离圆心最近的点
cover	覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点