css3 linear-gradient渐变效果及兼容性处理

最新推荐文章于 2022-04-23 14:34:08 发布

daruanzai3165

最新推荐文章于 2022-04-23 14:34:08 发布

阅读量799

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/hcxy/p/6759338.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .gradient{
 8             height:40px;
 9             background: #A56697; 
10             background:-moz-linear-gradient(left,#CA5A83,#7E72AB);  
11             background:-webkit-linear-gradient(left,#CA5A83,#7E72AB);   
12             background: -o-linear-gradient(left,#CA5A83,#7E72AB); 
13             background: -ms-linear-gradient(left,#CA5A83,#7E72AB); 
14             background: linear-gradient(to right, #CA5A83 0%,#7E72AB 100%); 
15             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CA5A83', endColorstr='#7E72AB',GradientType=0 ); 
16             :root .gradient{filter:none;} 
17         }
18     </style>
19 </head>
20 <body>
21     <div class="gradient"></div>
22 </body>
23 </html>