ie9不支持渐变,但是支持border-radius和box-shadow,所以在之前的小博客我都是用纯色代替渐变
但是有没有办法让ie9也支持渐变,也许大多数人会想到滤镜,但是滤镜会消耗性能,而且圆角会没有效果,所以不推荐使用。
有没有比css3更合适的方案呢?先看看各浏览器对css3的支持情况
浏览器 | Radial CSS | Linear CSS |
---|---|---|
Firefox | -moz-radial-gradient( 500px 25%, circle, blue 20px, #eef 40px ); | -moz-linear-gradient(top, #444444, #999999);) |
Chrome 11, Safari 5 | -webkit-radial-gradient(#cde6f9, #81a8cb); | -webkit-linear-gradient(top, #444444, #999999);) |
Chrome | -webkit-gradient( radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eef) ); | -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); |
Opera 11 | 不支持 | -o-linear-gradient(top, #444444, #999999);) |
Opera 10– | 不支持 | 不支持 |
IE10 beta | -ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise) | -ms-linear-gradient(30deg, orange, yellow 50%, turquoise); |
IE9 | 不支持 | 不支持 |
IE8 | 不支持 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient( la la la... |
IE5-7 | 不支持 | filter: progid:DXImageTransform.Microsoft.gradient(la la la.. |
svg的支持情况
- Chrome (since May 2010)
- Firefox (March 2011)
- IE9 (March 2010 beta)
- Safari (June 2010)
- Opera (June 2008).
由此可以看出现代浏览器对svg渐变的支持比css3渐变来的好,而且现在css3的渐变需要添加浏览器前缀,webkit早期版本的语法又和现在的不同,所以要兼容android和ios还需要写早期的版本,所以一个渐变需要写一长串的代码
#wmdqq .left,#dslxs .left{ background: -webkit-gradient(linear, left top, left bottom, from(#f1fe85), to(#fff)); background: -webkit-linear-gradient(#f1fe85, #fff); background: -moz-linear-gradient(#f1fe85, #fff); background: -ms-linear-gradient(#f1fe85, #fff); background: -o-linear-gradient(#f1fe85, #fff); background: linear-gradient(#f1fe85, #fff); }
而svg实现的代码如下
代码少了,而且兼容性也变好了,现在ie9也支持了,对于不支持svg的ie6,7,8,我使用png32图片替代,效果如下图所示图片大小为1.34k,svg大小为329字节,而且svg是矢量的,所以怎么放大缩小都不会变形,可以用来代替多张图片。 点击观看演示:点此查看