标签:
背景颜色渐变之线性渐变
语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor);
opera浏览器 background: -o-linear-gradient(position/deg,startColor,endColor);
safari和chrome浏览器 background: -webkit-linear-gradient(position/deg,startColor,endColor);//新版本
在ie下主要通过滤镜实现。??
事例:第一个参数为角度或者top、left等位置参数,但是因为top、left的变化较单一,所以一般使用角度作为参数,更利于实现多种渐变。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3</title> 5 </head> 6 <style type="text/css"> 7 .example{ 8 width:100%; 9 height:500px; 10 background: linear-gradient(45deg,red,blue); 11 background: -webkit-linear-gradient(45deg,red,blue); 12 background: -o-linear-gradient(45deg,red,blue); 13 background: -moz-linear-gradient(45deg,red,blue); 14 } 15 </style> 16 <body> 17 <div class="example"> 18 111 19 </div> 20 </body> 21 </html>
当指定的角度时,该角度为一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右水平渐变,而90度将创建一个从底部到顶部的垂直渐变。
参考:http://www.w3cplus.com/content/css3-gradient
标签:
原文地址:http://www.cnblogs.com/yan-ck/p/5802287.html