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>
【知识点】几个常见浏览器内核和IE滤镜filter