CSS3兼容各浏览器的渐变代码 包括水平和垂直渐变

作者:CSS3教程      点击次数:943次     发布日期:2015-12-02

CSS3兼容各浏览器的渐变代码 包括水平和垂直渐变

 CSS兼容各浏览器的渐变代码,包括水平和垂直渐变,兼容火狐、chrome、Opera等浏览器的代码也有,从此可以不用图片了,极大的方便了CSS爱好者。

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <title>CSS线性渐变-divcss8.com</title>
05 <style type="text/css">
06 .test1{
07 width: 200px;
08 height: 80px;
09 text-align: center;
10 line-height: 80px;
11 margin-bottom: 10px;
12 color: White;
13 font-size: 20px;
14 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
15 background: -moz-linear-gradient(top, #FF0000, #F9F900);
16 background: -o-linear-gradient(top,#FF0000, #F9F900);
17 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
18 }
19 .test2{
20 width: 200px;
21 height: 80px;
22 text-align: center;
23 line-height: 80px;
24 margin-bottom: 10px;
25 color: White;
26 font-size: 20px;
27 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
28 background: -moz-linear-gradient(left, #FF0000, #F9F900);
29 background: -o-linear-gradient(left,#FF0000, #F9F900);
30 background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));
31 }
32 </style>
33 </head>
34 <body>
35 <div class="test1">CSS垂直渐变</div>
36 <div class="test2">CSS水平渐变</div>
37 </body>
38 </html>

同时也会大家收集了一些在其它浏览器下的CSS渐变代码,供需要者使用。先来看IE下的CSS渐变代码:

1 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');

参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平。

Firefox下的CSS渐变代码:这个更简单:

1 background: -moz-linear-gradient(top#FF0000#F9F900);

参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变。

Opera浏览器中的CSS渐变,代码同样挺简洁:

1 background: -o-linear-gradient(top,#FF0000#F9F900);

参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变。

webkit内核的浏览器CSS渐变代码,如Chrome、Safari等:

1 background: -webkit-gradient(linear, 0% 0%0% 100%, from(#FF0000), to(#F9F900));

参数:linear线性, x1 x2, x3 x4 x1与x3相同时垂直,x2与x4相同时水平 from起始颜色 to结束颜色。

好了,这么多的渐变代码,自己亲自尝试下吧,你可以试着改变他们的颜色,变成你自己喜欢的渐变风格。

分享DIVCSS8