标签:
语法:
选择器{
background:linear-gradien(线性渐变的方向,起点颜色,终点颜色);
}
第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;
第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色
支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,
为了支持chrome和火狐,要分别写上-webkit-,-moz-
比如:
div{
background:-webkit-linear-gradient(top,red,blue);/*谷歌*/
background:-moz-linear-gradient(top,red,blue); /*火狐*/
background:linear-gradient(top,red,blue); /*ie10*/
}
之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。
其实是用了filter滤镜来做:
.div{
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr=pink,
endColorstr=black
);
/*IE7*8*9有效*/
其中:GradientType=1代表纵向,0代表横向
标签:
原文地址:http://www.cnblogs.com/hamsterPP/p/4825075.html