13.7 使用渐变背景
渐变背景gradient也是CSS3中的新特性，通过它可以在不使用图像的情况下创建从一种颜色到另一种颜色的过渡，如图13-7所示。尽管相关的规范仍在变动，但随着规范不断接近最终的版本，浏览器的支持程度也在不断提升。
使用CSS创建的渐变有线性渐变和径向渐变两种主要方式，每种方式都有不同的必选参数和可选参数。
渐变背景的语法为：
图13-7 渐变背景
其中：
（1）type为渐变类型：
①linear-gradient（线性渐变）；
②radial-gradient（径向渐变）。
（2）point为渐变开始位置：
①left（创建从元素左侧开始的渐变）；
②right（创建从元素右侧开始的渐变）；
③top（创建从元素顶端开始的渐变）；
④bottom（创建从元素底端开始的渐变）；
⑤angel值（如0deg、45deg、120deg，deg为degree角度的缩写，这里的角度为渐变线沿逆时针方向转过的角度）；
⑥center（仅适用于径向渐变，创建从元素中心开始的渐变）。
（3）c1是渐变的开始颜色。
（4）c2是渐变的结束颜色。
如果是多个颜色的渐变，则写为“c1，p1，c2，p2，c3，p3”这样的形式，其中c表示颜色（使用颜色名称、十六进制数以及RGB、RGBA或HSL值进行指定），p是对应颜色的位置（使用0～100%的百分数进行指定）。
要实现如图13-7所示的5种效果，先添加5个div元素，代码如下：
第一个class为horizontal的div元素设置从左向右的线性渐变背景，渐变开始颜色为＃b8c6df，结束颜色为＃163d7f，代码如下：
第二个class为vertical的div元素设置从上到下的线性渐变背景，渐变开始颜色为＃b8c6df，结束颜色为＃163d7f，代码如下：
第三个class为diagonal的div元素设置45度的线性渐变背景，渐变开始颜色为＃b8c6df，结束颜色为＃163d7f，代码如下：
第四个class为radial的div元素设置从元素中心开始的径向渐变背景，渐变开始颜色为＃b8c6df，结束颜色为＃163d7f，代码如下：
第五个class为multi-stop的div元素设置从上到下的3个颜色线性渐变背景，第一个颜色为＃ff0000（红色），中间颜色为＃ffff00（黄色），最后颜色为＃00ff00（绿色），代码如下：
根据渐进增强的原则，最好为不支持背景渐变属性的浏览器提供一个后备选项，这个后备可以是一个简单的背景颜色或背景图像。因此在本例中，每个div的样式中，除了设置渐变背景属性外，还添加了背景颜色。
尽管最新版本的Web浏览器对渐变语法的支持程度始终在提升，但渐变语法仍在变化之中，需要使用厂商前缀，本例中为了降低学习难度，易于理解，代码演示时并没有添加厂商前缀，完整的添加了厂商前缀的代码请查看本网页的源代码。
可以使用以下两个可视化工具来完成创建CSS渐变代码的烦琐工作，这些工具还可以自动生成所有带厂商前缀的属性，从而确保最大限度地兼容旧的浏览器版本：
（1）Gradient Generator（http：//www.colorzilla.com/gradient-editor）；
（2）CSS Gradient Background Maker（http：//ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker）。