各种引擎下CSS3渐变

webkit引擎下的渐变特效

直线渐变

background:-webkit-gradient(linear,left top,left bottom,from(cornflowerblue),top(whitesmoke))

可以给其中添加color-stop属性
其值可以为百分数，小数

background:-webkit-gradient(linear,left top,left bottom,from(cornflowerblue),top(whitesmoke)，color-stop(0.5,#000)，color-stop(0.6，blue));

径向渐变
(45,45)是第一个圆的坐标，10为其半径
（52，50）是第二个圆的坐标，30为半径
from（）to()中的颜色值可以设置为rgba()形式

 background: -webkit-gradient(radial,45,45,10,52,50,30,from(#000000),to(#CCCCCC),color-stop(90%,#00008B));*/

Becko引擎下的渐变特效

线性渐变

moz-linear-gradient(point(开始起点包括数值，百分比，关键字)，stop定义步长)
-moz-linear-gradient（red,blue)默认从上往下
-moz-linear-gradient（top left,red,blue)规定左上为起始点

添加多种颜色

-moz-linear-gradient（left,red,orange,purplr,green,bllur,indigo)

可将渐变旋转一定角度，正值代表逆时针

-moz-linear-gradient(left 90deg,red,rgba(255,0,0,0));逆时针旋转角度

在y轴80%的位置添加一个绿色色标

-moz-linear-gradient(top,blue,green 80%,organge);

• 径向渐变的基本语法

   * -moz-radial-gradient(red,yellow,blue);//从中间向外，黄色到蓝色
		   * -moz-radial-gradient(red 20%,yellow 40%,blue 60%);
		   * -moz-radial-gradient(bottom left,red,yellow,blue);
		   * -moz-radial-gradient(left,circle,red,yellow,blue);设置形状为圆
		   * -moz-radial-gradient(ellipse椭圆  cover全覆盖,red,yellow,blue);

		   /重复直线渐变，重复径向渐变
		   
		    -moz-repeating-radial-gradient(circle,black,black 10%,white 10px,white 20px)；漩涡式
		    -moz-repeating-radial-gradient(top left 60deg,black,black 10px,white 10px,white 20px);