真正的战斗在CSS3颜色的线性渐变

本文主要介绍了CSS3颜色渐变的真正的战斗。在这个例子中，它显示了代码设置的不同方向的效果，你需要的朋友可以参考它。
线性渐变可以设置3个参数值：方向、初始颜色和结束颜色。最简单的模式只需要定义起始颜色和结束颜色，起始、结束和方向默认为元素的顶部：

CSS代码将内容复制到剪贴板。
测试{。
背景：线性渐变（红色，蓝色）；
}

上面的代码的效果如图所示。
最简单的线性梯度效应
如果您希望在浏览器的一些旧版本中显示图5.9的效果（IE除外），则需要添加兼容代码：

CSS代码将内容复制到剪贴板。
{测试。
背景：WebKit的线性梯度（红、蓝）； / * WebKit内核浏览器兼容的代码。
背景：- o-linear-gradient（红、蓝）； / * Opera浏览器兼容的代码。
背景：-moz线性梯度（红、蓝）； / *火狐浏览器兼容的代码。
背景：线性渐变（红色，蓝色）；标准语法应该放在
}

线性渐变可以指定梯度的方向，如下所示：

CSS代码将内容复制到剪贴板。
{测试。
背景：WebKit的线性梯度（左，红，蓝）； / * WebKit内核浏览器兼容的代码。
背景：- o-linear-gradient（左，红，蓝）； / * Opera浏览器兼容的代码。
背景：-moz线性梯度（左，红，蓝）； / *火狐浏览器兼容的代码。
背景：线性梯度（要放，红，蓝）； / * * /标准语法应该放在最后的
}

上面的代码的效果如图所示，当设置左/右参数时，渐变的方向从上到下到从左到右。
指定的起始点
注：标准梯度方向格式为例对right右边是用于Firefox和Opera浏览器，并为WebKit内核浏览器使用左边代表起始点位置。
渐变的方向也可以用角度和0度，90度，180度，和270deg对应上，右，下，左，例如：

CSS代码将内容复制到剪贴板。
{测试。
背景：WebKit的线性梯度（45度，红，蓝）； / * WebKit内核浏览器兼容的代码。
背景：- o-linear-gradient（45度，红，蓝）； / * Opera浏览器兼容的代码。
背景：-moz线性梯度（45度，红，蓝）； / *火狐浏览器兼容的代码。
背景：线性梯度（45度，红，蓝）； / * * /语法标准
}

效果如图所示。
图5.11指定渐变的方向是45度。
线性渐变不仅支持两种颜色的渐变，而且还增加了任何颜色，例如，我们可以使用线性渐变来构造彩虹效果，如图5.12所示。
彩虹的颜色
上图所示的彩虹色效果代码如下所示：

CSS代码将内容复制到剪贴板。
{测试。
背景：WebKit的线性梯度（左，红色，橙色，黄色，绿色，蓝色，表明，紫）；
背景：- o-linear-gradient（左，红色，橙色，黄色，绿色，蓝色，表明，紫）；
背景：-moz线性梯度（左，红色，橙色，黄色，绿色，蓝色，表明，紫）；
背景：线性梯度（要放，红色，橙色，黄色，绿色，蓝色，表明，紫）；
}