现行渐变
首先看下示例
（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结束颜色
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）---</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>
38
垂直渐变
39 </div>
40 <div>
41
水平渐变
42 </div>
43 </body>
44 </html>