CSS3颜色渐变应用方法总结（下篇）

在上一篇中波波主要分享了CSS3颜色渐变的相关语法，本篇波波将为大家分享CSS3颜色渐变中的线性渐变与径向渐变以及浏览器的兼容性。

线性渐变的语法：

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

径向渐变的语法：

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);}

渐变的兼容方法：

1、Firefox：

2、Safari , Chrome：

3、Opera 11.10+

4、IE

CSS3线性颜色渐变实例：

使用语法

1、线性渐变从上到下（默认）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色。

2、线性渐变从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色。

3、线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色。

#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottombottom rightright, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottombottom rightright, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottombottom rightright, red , blue); /* 标准的语法 */
}

4、线性渐变 - 角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

使用语法：

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

5、线性渐变 - 使用多个颜色结点

带有多个颜色结点的从上到下的线性渐变。

6、线性渐变 - 使用透明度（Transparency）

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(rightright,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(rightright,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to rightright, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}