Web开发中对元素样式使用过滤器以增强其可视化效果
在WEB开发中，为了增强界面的美观往往需要对一些元素实现一些阴影、模糊、过渡等效果，最直接的方法就是通过美工制做图片来实现，IE从4.0版本开始支持过滤器，可以用此功能来实现诸如阴影、模糊、过渡等效果。我们可以采用对元素的样式使用过滤器来完成简单的效果的实现
我们以IMG和DIV元素为例
模糊效果：
<IMG ID="sample1" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)">
反转效果：
<IMG ID="sample2" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)">
过渡效果：
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
虚化效果：
<IMG ID="sample3" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.Alpha(opacity=20)">
DIV的过渡
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
变形
<IMG ID="sample5" SRC="hero.jpg" style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=10,Strength=5)">
效果截图:
我们以IMG和DIV元素为例
模糊效果：
<IMG ID="sample1" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)">
反转效果：
<IMG ID="sample2" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)">
过渡效果：
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
虚化效果：
<IMG ID="sample3" SRC="hero.jpg" STYLE="FILTER:progid:DXImageTransform.Microsoft.Alpha(opacity=20)">
DIV的过渡
<DIV STYLE="FILTER:progid:DXImageTransform.Microsoft.gradient (startColorstr=#000000, endColorstr=#FFFFFF)"></DIV>
变形
<IMG ID="sample5" SRC="hero.jpg" style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=10,Strength=5)">
效果截图:
