linear-gradient

线性渐变是网页设计中最常见的图形元素之一，之前我们要实现一个元素的背景的线性渐变只有用（透明的）图片来平铺，现在通过CSS3的linear-gradient属性，可以很方便的实现元素的线性渐变。

语法

inear-gradient( [ || ,]? , [, ]* )

值

point：定义渐变的起始点，可以使用left|center|right或者垂直的top|center|bottom等值，也可以使用百分比。默认从元素的左上角开始。如果只定义了水平方向或者垂直方向中的一个值，那么另外一个值将默认为center。
angle：渐变的角度。
stop：这个值由一个颜色值和可选的停止位置组成。位置值可以用百分比或者像素值。

详解

background-image: linear-gradient(left, red 10%, orange, yellow, green);

以具体例子来说明下，这里只定义了left，其实等同于 left center，而后面的颜色依次渐变，其中最前面的红色宽度只有10%。其余宽度平均掉。

实例

/*编辑此次样式，下面的demo就会及时生效*/

.linear-gradient{ width:400px; height:50px;

/*彩虹条*/ background:-moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);/*Firefox*/

background:-webkit-gradient(linear,left, from(red),color-stop(orange),color-stop(yellow),color-stop(green),color-stop(blue),color-stop(indigo),color-stop(violet));/*webkit，旧的写法*/

background:-webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);/*webkit*/ background:-ms-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);/*IE 10+*/

background:-o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);/*opera*/ background:linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);/*标准写法*/ }

效果如下：

说明

在webkit较早的版本中，采用通用的-webkit-gradient写法，即-webkit-gradient(linear|radial,…)，在最近的版本中才开始使用标准的-webkit-linear-gradient写法。具体可参见webkit对于CSS3渐变样式语法的更新

浏览器兼容性

• IE 10.0+据说会支持
• Firefox 3.6+
• Chrome 10.0+，Safari 5.0+
• Opera 11.0+