实现渐变色案例

最新推荐文章于 2022-09-30 16:53:01 发布

weixin_30799995

最新推荐文章于 2022-09-30 16:53:01 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/taidou/p/5964847.html

版权

 渐变色实现案例：
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>
效果如下：

转载于:https://www.cnblogs.com/taidou/p/5964847.html

weixin_30799995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现渐变色案例

渐变色实现案例：1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 <style typ...
复制链接

扫一扫