css3的背景颜色渐变@线性渐变

最新推荐文章于 2022-10-22 14:28:07 发布

weixin_30887919

最新推荐文章于 2022-10-22 14:28:07 发布

阅读量59

点赞数

原文链接：http://www.cnblogs.com/yan-ck/p/5802287.html

版权

背景颜色渐变之线性渐变

　　　　语法形式： 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>