首页 > 代码库 > 实现渐变色案例

实现渐变色案例

 渐变色实现案例:
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>
效果如下:
技术分享

 

 

 

实现渐变色案例