6.5 CSS3中的渐变效果

CSS3渐变（gradient）可以实现两种或多种指定的颜色之间显示平稳过渡的效果。在CSS3之前的版本中，如果要实现渐变效果，只能使用图片来实现，从而增加了下载的时间和带宽。可见，使用CSS3的渐变效果，不仅效果更漂亮，而且能减少下载的时间和带宽。CSS3定义了两种类型的渐变：线性渐变和径向渐变。

6.5.1 案例18——线性渐变效果

线性渐变效果为向下、向上、向左、向右或对角方向颜色过渡的效果。如果想创建一个线性渐变效果，至少需要定义两种颜色结点。定义线性渐变效果的语法格式如下。

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中direction用于指定渐变的方向；color-stop1用于指定颜色的起点；color-stop2用于指定过渡颜色或终点颜色。

下面将通过案例来学习如何实现从上到下的线性渐变效果。

【例6.21】（案例文件：ch06\6.21.html）

在IE 11.0浏览器中浏览效果如图6-23所示。可见，线性渐变的默认方向为从上到下。

图6-23 线性渐变效果

提示

Internet Explorer 9及之前的版本不支持渐变效果。

用户可以定义水平渐变效果。例如将渐变方向定义为从左到右，则对应的代码如下。

用户可以定义对角渐变效果。例如从左上角到右下角的线性渐变，对应的代码如下。

如果用户想要在渐变的方向上做更多的控制，可以定义一个角度。具体语法规则如下。

background: linear-gradient(angle, color-stop1, color-stop2);

其中angle为水平线和渐变线之间的角度，逆时针方向计算。例如以下为带有角度的线性渐变。

CSS3渐变也支持透明度设置，可用于创建减弱变淡的效果。为了添加透明度效果，可以使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。

下面的代码将实现从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的蓝色。

6.5.2 案例19——径向渐变效果

径向渐变是以指定的中心点，按设置的形状和大小进行渐变的效果。径向渐变的语法格式如下。

background: radial-gradient(center, shape, size, start-color, ..., last-
color);

上述参数的含义如下。

（1）center为渐变的中心，默认值为渐变的中心点。

（2）shape为渐变的形状，它的值可以为circle或ellipse。其中，circle表示圆形，ellipse表示椭圆形。默认值是ellipse。

（3）size为渐变的大小。它可以取值为：closest-side、farthest-side、closest-corner或者farthest-corner。

（4）start-color为开始颜色，last-color为结束颜色。

下面的案例将制作不同形状的径向渐变效果。

【例6.22】（案例文件：ch06\6.22.html）

在IE 11.0浏览器中浏览效果如图6-24所示。

图6-24 径向渐变效果