渐变色实现案例：
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>
效果如下：
原文：http://www.cnblogs.com/taidou/p/5964847.html