渐变色实现案例:
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 </head>
8 <style type="text/css">
9 .linear {
10 width: 100%;
11 height: 600px;
12 FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#b8c4cb, endColorStr=red);
13 /*IE 6 7 8*/
14 background: -ms-linear-gradient(top, #9C5560, #fff);
15 /* IE 10 */
16 background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);
17 /*火狐*/
18 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));
19 /*谷歌*/
20 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9C5560), to(#fff));
21 /* Safari 4-5, Chrome 1-9*/
22 background: -webkit-linear-gradient(top, #9C5560, #fff);
23 /*Safari5.1 Chrome 10+*/
24 background: -o-linear-gradient(top, #9C5560, #fff);
25 /*Opera 11.10+*/
26 }
27 </style>
28
29 <body>
30
31 <div class="linear"></div>
32
33 </body>
34
35 </html>
效果如下: