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);