码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-24 13:01:04      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

 背景颜色渐变之线性渐变

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

 

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

标签:

原文地址:http://www.cnblogs.com/yan-ck/p/5802287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!