4.2 色彩模式

CSS2.1支持Color Name（颜色名称）、HEX（十六进制颜色值）、RGB，CSS3新增3种颜色模式：RGBA、HSL和HSLA，下面分别进行介绍。

权威参考：http://www.w3.org/TR/css3-color/。

4.2.1 rgba()函数

RGBA是RGB色彩模式的扩展，它在红、绿、蓝三原色通道基础上增加了Alpha通道。其语法格式如下：

    rgba(r,g,b,<opacity>)

参数说明如下。

r、g、b：分别表示红色、绿色、蓝色三原色所占的比重。取值为正整数或者百分数。正整数值的取值范围为0～255，百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。注意，并非所有浏览器都支持使用百分数值。

<opacity>：表示不透明度，取值范围为0～1。

【示例】下面示例使用CSS3的box-shadow属性和rgba()函数为表单控件设置半透明度的阴影，来模拟柔和的润边效果。示例主要代码如下，预览效果如图4.10所示。

图4.10 设计带有阴影边框的表单效果

4.2.2 hsl()函数

HSL是一种标准的色彩模式，包括了人类视力所能感知的所有颜色，在屏幕上可以重现16777216种颜色，是目前运用最广泛的颜色系统。它通过色调（H）、饱和度（S）和亮度（L）3个颜色通道的叠加来获取各种颜色。其语法格式如下：

    hsl(<length>,<percentage>,<percentage>)

参数说明如下。

<length>：表示色调（Hue）。可以为任意数值，用以确定不同的颜色。其中0（或360、-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红。

<percentage>（第一个）：表示饱和度（Saturation），取值范围为0～100%。其中0%表示灰度，即没有使用该颜色；100%饱和度最高，即颜色最艳。

<percentage>（第二个）：表示亮度（Lightness），取值范围为0～100%。其中0%最暗，显示为黑色；50%表示均值；100%最亮，显示为白色。

【示例】设计颜色表。先选择一个色值，然后通过调整颜色的饱和度和亮度比重，分别设计不同的配色方案表。在网页设计中，利用这种方法可以根据网页需要选择恰当的配色方案。使用HSL颜色表现方式，可以很轻松地设计网页配色方案表，模拟演示效果如图4.11所示。

图4.11 使用HSL颜色值设计颜色表

在上面代码中，tr:nth-child(4) td:nth-of-type(1)中的tr:nth-child(4)子选择器表示选择行，而td:nthof-type(1)表示选择单元格（列）。其他行选择器结构依此类推。在“background:hsl(0,0%,0%);”声明中，hsl()函数的第1个参数值0表示色相值，第2个参数值0%表示饱和度，第3个参数值0%表示亮度。

4.2.3 hsla()函数

HSLA是HSL色彩模式的扩展，在色相、饱和度、亮度三要素基础上增加了不透明度参数。使用HSLA色彩模式，可以定义不同透明效果。其语法格式如下：

    hsla(<length>,<percentage>,<percentage>,<opacity>)

其中前3个参数与hsl()函数参数含义和用法相同，第4个参数<opacity>表示不透明度，取值范围为0～1。

【示例】下面示例设计一个简单的登录表单，表单对象的边框色使用#fff值进行设置，定义为白色；表单对象的阴影色使用rgba(0,0,0,0.1)值进行设置，定义为非常透明的黑色；字体颜色使用hsla(0,0%,100%,0.9)值进行设置，定义为轻微透明的白色。预览效果如图4.12所示。

图4.12 设计登录表单

4.2.4 opacity属性

opacity属性定义元素对象的不透明度。其语法格式如下：

    opacity: <alphavalue> | inherit;

取值简单说明如下。

<alphavalue>：由浮点数字和单位标识符组成的长度值。不可为负值，默认值为1。opacity取值为1时，元素是完全不透明的；取值为0时，元素是完全透明、不可见的；介于1到0之间的任何值都表示该元素的不透明程度。如果超过了这个范围，其计算结果将截取到与之最相近的值。

inherit：表示继承父辈元素的不透明性。

【示例】下面示例设计<div class="bg">对象铺满整个窗口，显示为黑色背景，不透明度为0.7，这样可以模拟一种半透明的遮罩效果；再使用CSS定位属性设计<div class="login">对象显示在上面。示例主要代码如下，演示效果如图4.13所示。

图4.13 设计半透明的背景布效果

4.2.5 transparent值

transparent属性值用来指定全透明色彩，等效于rgba(0,0,0,0)值。

【示例】下面示例使用CSS的border设计三角形效果，通过transparent颜色值让部分边框透明显示。代码如下所示，效果如图4.14所示。

图4.14 设计三角形效果

通过调整各边颜色设置或者各边宽度，可以设计不同角度的三角形或直角等不同形状。

（1）设计向右三角形

（2）设计直角三角形

（3）设计梯形（效果如图4.15所示）

图4.15 设计梯形效果

4.2.6 currentColor值

在CSS中，border-color、box-shadow和text-decoration-color属性的默认值是color属性的值。

【示例1】在下面示例中，为段落文本增加边框线，边框线的颜色为“color:red;”，显示为红色。

在CSS1和CSS2中，却没有为此定义一个相应的关键字。为此CSS3扩展了颜色值，包含currentColor关键字，并用于所有接受颜色的属性上。currentColor表示color属性的值。

【示例2】在下面示例中，设计图标背景颜色值为currentColor，这样在网页中随着链接文本的字体颜色不断变化，图标的颜色也跟随链接文本的颜色变化而变化，确保整体导航条色彩一致性，达到图文合一的境界，效果如图4.16所示。

图4.16 设计图标背景色为currentColor