現行漸變
首先看下示例
（1）垂直漸變
（2）垂直漸變
IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
參數：startColorStr起始顏色 endColorStr結束顏色 gradientType為0時代表垂直，為1時代表水平
Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
參數：top、bottom垂直，left、right水平 例如：top時從頂部由#FF0000到#F9F900漸變，bottom時從底部由#FF0000到#F9F900漸變
Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
參數：top、bottom垂直，left、right水平 例如：top時從頂部由#FF0000到#F9F900漸變，bottom時從底部由#FF0000到#F9F900漸變
webkit，如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
參數：linear線性， x1 x2, x3 x4 x1與x3相同時垂直，x2與x4相同時水平 from起始顏色 to結束顏色
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>線性漸變（linear-gradient）---http://www.cnblogs.com/kuikui</title>
5 <style type="text/css">
6 .test1
7 {
8 width: 200px;
9 height: 80px;
10 text-align: center;
11 line-height: 80px;
12 margin-bottom: 10px;
13 color: White;
14 font-size: 20px;
15 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
16 background: -moz-linear-gradient(top, #FF0000, #F9F900);
17 background: -o-linear-gradient(top,#FF0000, #F9F900);
18 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
19 }
20 .test2
21 {
22 width: 200px;
23 height: 80px;
24 text-align: center;
25 line-height: 80px;
26 margin-bottom: 10px;
27 color: White;
28 font-size: 20px;
29 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
30 background: -moz-linear-gradient(left, #FF0000, #F9F900);
31 background: -o-linear-gradient(left,#FF0000, #F9F900);
32 background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));
33 }
34 </style>
35 </head>
36 <body>
37 <div class="test1">
38 垂直漸變
39 </div>
40 <div class="test2">
41 水平漸變
42 </div>
43 </body>
44 </html>