ie css3兼容方法之 ie 滤镜

https://msdn.microsoft.com/en-us/library/ms533087(v=vs.85).aspx这是官网地址

css3在ie6,7,8的兼容性很差，这时候可以用ie自带的滤镜来实现效果，比如阴影，透明度，

1.Alpha，调整对象内容的不透明度。

语法：

filter:progid:DXImageTransform.Microsoft.Alpha()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Alpha(enabled='ture',GradientType='1',StartColorStr='#00000000',EndColorStr='#FFFF3300')

• Style，设置或者调整不透明度的风格。0代表默认值，1代表线性不透明，2代表径向渐变，3代表矩形渐变

• Opacity，设置或调整不透明度值。0~100值，其中0默认值表示全透明，100为全不透明

• FinishOpacity，设置或调整最后不透明度值。0~100值，其中0默认值表示全透明，100为全不透明

• StartX，设置或调整水平不透明最开始位置，默认值为0，即从对象最左边开始。

• FinishX，设置或调整水平不透明度结束位置，默认值为0

• StartY，设置或调整垂直方向不透明度开始位置，默认值为0

• FinishY，设置或调整垂直不透明度结束位置，默认值为0

不妨用你的手中的IE6~8来预览一下官方demo→Alpha Filter

2.BasicImage，调整对象的内容的颜色处理、图像旋转或不透明度。

filter:progid:DXImageTransform.Microsoft.BasicImage()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.BasicImage(Grayscale='x', Xray='x', Mirror='x', Invert='x', Opcity='x', Rotation='x')

• GrayScale ，设置或调整对象的灰度值。

• Invert ，设置或调整对象的反相。

• Opacity ，设置或调整对象的不透明度。

• Mask ，设置或调整对象的的RGB是否为MashColor值，0默认值，显示正常RGB值，1表示改变内容为MashColor（不常用）

• Mirror ，设置或调整对象镜像。0正常显示，1内容对象将翻过来。

• Rotation ，设置或调整对象旋转，0正常显示，1代表旋转90°，2代表旋转180°，3代表旋转270°

• XRay ，设置或调整对象的X射线，布尔值，0正常显示，1代表X射线，有点像我们去医院拍X光一样的效果。

不妨用你的手中的IE6~8来预览一下官方demo→BasicImage Filter

3.Blur，设置对象的模糊值。

filter:progid:DXImageTransform.Microsoft.Blur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')

• PixelRadius，设置对象的模糊半径，1~100数值。

• MakeShadow，设置对象是否投影，布尔值，true和false

• ShadowOpacity，设置对象投影不透明度，0.0~1.0，假如MakeShadow为false那么该值无效。

不妨用你的手中的IE6~8来预览一下官方demo→Blur Filter

**4.Chroma **，设置对象的色彩透明度

filter:progid:DXImageTransform.Microsoft.Chroma()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Chroma(Color='x')

Color，设置颜色值。

不妨用你的手中的IE6~8来预览一下官方demo→Chroma Filter

**5.Compositor **，设置新对象内容的合成颜色，这个翻译有点拗口，大概的意思就是：2个对象，要显示哪个或者隐藏哪个，或者显示他们对比之后的新对象。

filter:progid:DXImageTransform.Microsoft.Compositor()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Compositor(function='')

其中function值有18个值，很多很多。也不一一说了，有兴趣的的前往这里看demo→Compositor Filter

**6.DropShadow **，设置对象的投影效果。

filter:progid:DXImageTransform.Microsoft.DropShadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX='x', OffY='x', Color='x', Positive='x')

• OffX，设置投影的X位移，单位数值，默认值为5

• OffY，设置投影的Y位移，单位数值，默认值为5

• Color，设置投影的颜色值

• Positive，设置投影的透明或者非透明。

之前有写过一篇关于css3的shadow文章，有时间的也可以点点。。。

不妨用你的手中的IE6~8来预览一下官方demo→Blur Filter

**7.Emboss **，设置对象的浮雕效果。

filter:progid:DXImageTransform.Microsoft.Emboss()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Emboss(Bias='')

一般来说Bias属性不需要设置，可以忽略，官方demo→Emboss Filter

**8.Engrave **，设置对象的雕刻效果。

filter:progid:DXImageTransform.Microsoft.Engrave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Engrave(Bias='')

一般来说Bias属性不需要设置，可以忽略，官方demo→Engrave Filter

**9.Glow **，设置对象的光晕效果。

filter:progid:DXImageTransform.Microsoft.Glow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Glow(color='', Strength='')

• color，设置光晕颜色。

• Strength，设置光晕的宽度，数值单位

官方demo→Glow Filter

**10.Light **，设置对象的亮度

filter:progid:DXImageTransform.Microsoft.Light()

• addAmbient，加入对象环境光

• addCone ，加入锥形光源

• addPoint 加入点光源

• changeColor ，改变亮度颜色

• changeStrength，改变亮度长度

• clear，清除亮度

• moveLight，移动光源焦点。

官方demo→Light Filter

**11.ICMFilter **，设置对象颜色内容改变，使其显示像打印设备的颜色。

官方无demo，IE9时，这个滤镜仅仅应用于屏幕内容显示效果上，当内容是打印时，将不应用。

**12.MaskFilter **，设置对象内容透明或者非透明颜色。

filter:progid:DXImageTransform.Microsoft.MaskFilter()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MaskFilter(Color='')

13.Matrix，调整大小、旋转或翻转使用矩阵的内容对象转换。

filter:progid:DXImageTransform.Microsoft.Matrix()

可以设置各种角度的旋转，官方demo→Matrix Filter

14.MotionBlur，设置对象模糊，测试完demo之后感觉有点像线性模糊，就是月光投射下来不均匀的模糊效果。

filter:progid:DXImageTransform.Microsoft.MotionBlur()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.MotionBlur(Direction='',Strength='',Add='')

• Direction，设置对象模糊方向，从0°~315°照射下来。

• Strength ，设置对象模糊范围，单位数值，初始值为5

• Add，设置图像模糊是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖

官方demo→MotionBlur Filter

15.Wave，设置对象为波浪纹滤镜效果

filter:progid:DXImageTransform.Microsoft.Wave()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Wave(Add='', LightStrength='', Phase='', Strength='',  Freq='')

• Add，设置滤镜是否覆盖在原图上，布尔值，true表示覆盖，false表示不覆盖

• LightStrength，亮度强度，0~100数值，数值越大滤镜效果越明显

• Phase，相对偏移值，0~100数值

• Strength，设置波浪强度，默认值为5，数值越大，波浪效果越明显。

• Frep，设置波浪频率，默认值为3，数值越大，波浪效果越明显。

官方demo→Wave Filter

16.Shadow，设置对象阴影效果。

filter:progid:DXImageTransform.Microsoft.Shadow()
/*完整写法*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')

• Color，设置阴影颜色。

• Direction，设置阴影的方向，角度也是从0°~315°取值（跟PS的投影效果非常的相似。）

• Strength，设置投影强度，数值越大越模糊。

官方demo→ Filter