css3 gradient

  CSS3的线性渐变：

 一、线性渐变在Mozilla下的应用

 语法：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* 

<div class="example example1"></div>

.example1 {
   background: -moz-linear-gradient( top,#ccc,#000);
}

二、线性渐变在Webkit下的应用

  语法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

老式写法：

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

新式写法：

-webkit-linear-gradient(top,#ccc,#000);

三、线性渐变在Opera下的应用

语法：

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

实例：

background: -o-linear-gradient(top,#ccc, #000);

四、线性渐变在Trident (IE)下的应用

语法：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

工作方式：
1、开始于center（水平方向）和top（垂直方向）也就是Top → Bottom：

background: -webkit-linear-gradient(top, #ace, #f96);

2  始于left（水平方向）和center（垂直方向）也是就Left → Right：

background: -webkit-linear-gradient(left, #ace, #f96);

3  起始于left（水平方向）和top（垂直方向）:

background: -webkit-linear-gradient(left top, #ace, #f96);