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