码迷,mamicode.com
首页 > 其他好文 > 详细

实现IE兼容方案之一(滤镜)

时间:2018-03-28 20:37:50      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:微软   mic   而不是   nbsp   gid   content   tps   target   enabled   

当 CSS3 遇上较低版本 IE,滤镜就成了实现兼容性的折衷方案之一。虽然滤镜是过时很久的技术了,但还是能看出微软的高瞻远瞩——早在 IE6 就用滤镜实现了 bug 丛生的 CSS3 特性。

以下是 MSDN 《Alpha Filter》 中同时使用多个滤镜的示例,适合各个 IE 版本。滤镜之间使用空格或者回车隔开(DEMO):

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>

 

然而,由于滤镜本身的缺陷,这种组合时不时会有意想不到的效果。例如,单独使用  shadow 滤镜是给盒子里的文字加阴影特效的(DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

 

配合 Glow 滤镜也很正常,可以加上发光效果(DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

 

然而,再加上 Gradiant 滤镜,所有的效果就都加在 div 盒子而不是文字上的了 (DEMO):

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">测试文字</div>

 

这或许是因为 Gradiant 滤镜单独使用时就是只会应用在盒子上(DEMO)?

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)">测试文字</div>
 

 

总结

有的时候此法不好用,在于 IE 的滤镜本身。比如 IE 的 Shadow 滤镜和 Gradiant 滤镜配合只作用于盒子。退一步说,即便 Shadow 单独使用是文字阴影,有时也能看到难看的杂色(见配图,配图来自 鑫空间)。这里的“有时”和滤镜及文字所用的颜色以及浏览器都有关系。

 

贴出几个好的文章链接:

https://segmentfault.com/a/1190000002433305

http://w3help.org/zh-cn/causes/BT9011

实现IE兼容方案之一(滤镜)

标签:微软   mic   而不是   nbsp   gid   content   tps   target   enabled   

原文地址:https://www.cnblogs.com/zhou195/p/8665519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!