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線性漸變</
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結束顏色。
好了,這麼多的漸變代碼,自己親自嘗試下吧,你可以試著改變他們的顏色,變成你自己喜歡的漸變風格。