CSS滤镜效果

1、 CSS滤镜简介
　　随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如滤镜的和渐变的效果、CSS技术的飞快发展使这些需求成为了现实、从现在开始我要为大家介绍一个新的CSS扩展部分：CSS滤镜属性（Filter Properties)、使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象、对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替、当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具、也就是CSS FILTER+ SCRIPT， 这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础、可视化滤镜属性只能用在HTML控件元素上、所谓的HTML空间元素就是它们在页面上定义了一个矩形空间，浏览器的窗口可以显示这些空间、下面列出了HTML合法的控件和它们的说明、

2、 滤镜的应用
　　1.滤镜的使用 和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种
　　2. Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果
　　3. 如果使用多的滤镜，那么滤镜间要以空格分开， 一个滤镜中的若干参数以逗号分隔， Filter和其他的CSS样式则以分号分开、
　　4. 部分滤镜要有一定的width与height才能显示出结果,如shadow,blur,alpha等、
　　5. 在有的滤镜中处理图片时，图片必须是透明的效果图，比如:Glow等
　　6. 有的滤镜不能应用在图片上，仅对容器有效、
　　7. 目前仅有IE的最高版本对滤镜支持较全，使用时要考虑浏览者浏览器的兼容性、

3、 alpha滤镜

语法：

CSS：filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent )

Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Alpha ( sProperties ) "

alpha滤镜 属性 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 opacity 整数值(Integer)。取值范围为 0 - 100 。默认值为 0 ，即完全透明。 100 为完全不透明。 设置或检索透明渐变的开始透明度。 style 整数值(Integer)。 0 | 1 | 2 | 3 0 : 默认值。整体透明度。将 Opacity 值均匀的作用于对象。 1 : 线性渐变透明度。从由 StartX 和 StartY 决定的点，由 Opacity 决定的透明度开始，到由 FinishX 和 FinishY 决定的点，由 FinishOpacity决定的透明度结束。 2 : 圆形放射渐变透明度。圆形放射区域的圆心为对象的中心，圆周到与对象的边相切为止。透明渐变由圆心开始，到圆周结束。开始透明度由 Opacity 决定，结束透明度由 FinishOpacity 决定。 3 : 矩形放射渐变透明度。由对象的边开始，到对象的中心结束。开始透明度由 Opacity 决定，结束透明度由FinishOpacity 决定。 设置或检索透明渐变的样式 finishOpacity 整数值(Integer)。取值范围为 0 - 100 。默认值为 0 ，即完全透明。 100 为完全不透明 设置或检索透明渐变的结束透明度 startX 整数值(Integer)。其数值作为对象宽度的百分比值处理。默认值为 0 设置或检索 Alpha 滤镜透明渐变开始点的水平坐标。仅当 style 属性值设置为 1 ，即渐变样式为线性(linear)渐变时，此属性才会发生作用 startY 整数值(Integer)。其数值作为对象高度的百分比值处理。默认值为 0 设置或检索 Alpha 滤镜透明渐变开始点的垂直坐标。仅当 style 属性值设置为 1 ，即渐变样式为线性(linear)渐变时，此属性才会发生作用 finishX 整数值(Integer)。其数值作为对象宽度的百分比值处理。默认值为 0 设置或检索 Alpha 滤镜透明渐变结束点的水平坐标。仅当 style 属性值设置为 1 ，即渐变样式为线性(linear)渐变时，此属性才会发生作用 finishY 整数值(Integer)。其数值作为对象高度的百分比值处理。默认值为 0 设置或检索 Alpha 滤镜透明渐变结束点的垂直坐标。仅当 style 属性值设置为 1 ，即渐变样式为线性(linear)渐变时，此属性才会发生作用

　　
4、 blur滤镜

语法： CSS：filter:blur(add=add,direction=direction,strength=strength) Scripting： [oblurfilter=] object.filters.blur

blur滤镜 属性 取值范围 说明 add 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 direction 0（上），45（右上） 90（右），135（右下） 180（下），225（左下） 270（左），315（左上） Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。 strength 自然数 设置模糊影响范围， 默认是5个像素

5、 FlipH, FlipV 滤镜

FlipH, FlipV 滤镜（水平反转和垂直反转）

语法：

FlipH 滤镜语法 {filter:filph}
FlipV 滤镜语法 {filter:filpv}

6、 Glow滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Glow ( sProperties ) " 环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。 假如对象内有文本而无背景( background )和图片，则每个文本字符将会被辉光环绕。 假如对象内有背景( background )或图片，则整个对象容器会被辉光环绕。 假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。

glow滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 color color值 设置或检索此滤镜作用的颜色值。 strength 强度，值为1到255之间的任何整数，指定发光色力度和范围 设置或检索以对象为基准的向外扩散距离。

7、 Gray滤镜

语法： CSS：filter : Gray ( enabled=bEnabled ) Scripting：object.style.filter = "Gray ( sProperties ) " 设置对象灰度显示

Gray滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。

8、 Invert滤镜

语法： CSS：filter:Invert(enabled=bEnabled) Scripting：object.style.filter = "Invert(sProperties)" 反相显示对象内容

Invert滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。

9、 light滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Light ( sProperties ) " 为对象的内容建立光照效果 每个滤镜最多可以添加 10 束光。如果想在页面上添加更多的光，必须使用多个滤镜。

glow滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 addAmbient object.filters.item('DXImageTransform.Microsoft.Light').addAmbient ( iRed , iGreen , iBlue , iStrength ) iRed : 必选项。整数值(Integer)。 指定红色值。取值范围为 0 - 255 。 iGreen : 必选项。整数值(Integer)。 指定绿色值。取值范围为 0 - 255 。 iBlue : 必选项。整数值(Integer)。 指定蓝色值。取值范围为 0 - 255 。 iStrength : 必选项。整数值(Integer)。 指定光强度。取值范围为 0 - 100 。 为滤镜添加环境光 addCone iX1 : 必选项。整数值(Integer)。指定光源的左坐标值。 iY1 : 必选项。整数值(Integer)。指定光源的上坐标值。 iZ1 : 必选项。整数值(Integer)。指定光源的Z坐标值。 iX2 : 必选项。整数值(Integer)。指定光焦点的左坐标值。 iY2 : 必选项。整数值(Integer)。指定光焦点的上坐标值。 iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为 0 - 100 。 iSpread : 必选项。整数值(Integer)。指定光源的虚拟位置与对象的表面之间的角度或张度。取值范围为 0 - 90 。 为滤镜添加锥形光 addPoint iX : 必选项。整数值(Integer)。指定光源的左坐标值。 iY : 必选项。整数值(Integer)。指定光源的上坐标值。 iZ : 必选项。整数值(Integer)。指定光源的Z坐标值。 iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为 0 - 100 。 为滤镜添加点光 changeColor iLightNumber : 必选项。整数值(Integer)。指定光的标识符。此数值依据光被添加的顺序编号。如第一个被添加的光的标识符就等于 0 。 iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。 false : 指定改变是增加到当前设置的相对值。 true : 指定改变是替换当前设置的绝对值。 改变光的颜色 changeStrength iLightNumber : 必选项。整数值(Integer)。 指定光的标识符。此数值依据光被添加的顺序编号。如第一个被添加的光的标识符就等于 0 。 iStrength : 必选项。整数值(Integer)。指定光强度。取值范围为 0 - 100 。 fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于 0 表示采用绝对值。否则表示采用相对值。 false : 指定改变是增加到当前设置的相对值。 true : 指定改变是替换当前设置的绝对值。 改变光的强度 clear 清除所有与当前滤镜关联的光 moveLight iLightNumber : 必选项。整数值(Integer)。指定光的标识符。此数值依据光被添加的顺序编号。如第一个被添加的光的标识符就等于 0 。 iX : 必选项。整数值(Integer)。指定光源的左坐标值。 iY : 必选项。整数值(Integer)。指定光源的上坐标值。 iZ : 必选项。整数值(Integer)。指定光源的Z坐标值。 fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于 0 表示采用绝对值。否则表示采用相对值。 false : 指定改变是增加到当前设置的相对值。 true : 指定改变是替换当前设置的绝对值。 移动锥形光的焦点或点光的原点

mask滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.MaskFilter ( sProperties ) " 将对象内容的透明像素用 color 参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明。

mask滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活 color color 设置或检索此滤镜作用的颜色值

11、xray滤镜

语法： CSS：filter:xray(enabled=bEnabled) Scripting：object.style.filter = "xray(sProperties)" 以X光效果显示对象内容

xray滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。

12、Chroma滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Chroma ( sProperties ) " 将对象中指定的颜色显示为透明

Chroma 滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 color color值 设置或检索此滤镜作用的颜色值。

13、wave滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance ) Scripting： object .style. filter = "progid:DXImageTransform.Microsoft.Wave ( sProperties ) " 为对象内容建立波纹扭曲效果

wave滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 add 布尔值(Boolean)。true | false true : 滤镜作用图像覆盖原始图像 false : 默认值。只显示滤镜作用图像 设置或检索滤镜作用图像是否覆盖原始图像 freq 整数值(Integer)。默认值为 3 设置或检索滤镜建立的波浪数目 lightStrength 整数值(Integer)。取值范围为 0 - 100 。默认值为 100 设置或检索滤镜建立的波浪浪尖和波谷之间的距离 phase 整数值(Integer)。取值范围为 0 - 100 。默认值为 0 设置或检索正弦波开始处的相位偏移 strength 整数值(Integer)。单位为像素 设置或检索以对象为基准的在运动方向上的向外扩散距离

14、Emboss滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance ) Scripting： object .style. filter = "progid:DXImageTransform.Microsoft.Wave ( sProperties ) " 为对象内容建立波纹扭曲效果

wave滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 add 布尔值(Boolean)。true | false true : 滤镜作用图像覆盖原始图像 false : 默认值。只显示滤镜作用图像 设置或检索滤镜作用图像是否覆盖原始图像 freq 整数值(Integer)。默认值为 3 设置或检索滤镜建立的波浪数目 lightStrength 整数值(Integer)。取值范围为 0 - 100 。默认值为 100 设置或检索滤镜建立的波浪浪尖和波谷之间的距离 phase 整数值(Integer)。取值范围为 0 - 100 。默认值为 0 设置或检索正弦波开始处的相位偏移 strength 整数值(Integer)。单位为像素 设置或检索以对象为基准的在运动方向上的向外扩散距离

15、Engrave滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.Engrave ( sProperties ) " 用灰度值为对象内容制作浮雕纹理效果

Engrave 滤镜 属性|方法 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 Bias 设置或检索添加到滤镜结果的每种颜色组分的值的百分比。大的此属性值产生高亮滤光效果。高对比度的图片受滤镜的影响较小 浮点数(Float)。取值范围为 -1.0 - 1.0 。默认值为 0.7

16、DropShadow滤镜

语法： CSS：filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive ) Scripting：object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow ( sProperties ) "

DropShadow滤镜 属性 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 function 整数值(Integer) 0-25 设置或检索混合方式 color color 设置或检索此滤镜作用的颜色值。 offX 整数值(Integer)。单位为像素( px )。默认值为 5 设置或检索阴影在横坐标轴上以对象为基准的偏移量。正值向右偏移，负值向左偏移 offY 整数值(Integer)。单位为像素( px )。默认值为 5 设置或检索阴影在纵坐标轴上以对象为基准的偏移量。正值向下偏移，负值向上偏移 positive 布尔值(Boolean)。true | false true : 默认值。滤镜从对象的非透明像素建立阴影 false : 滤镜从对象的透明像素建立阴影

17、Shadow滤镜  

语法： CSS：filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance ) Scripting： object.style.filter = "progid:DXImageTransform.Microsoft.Shadow ( sProperties ) " 为对象内容建立阴影效果

Shadow滤镜 属性 取值范围 说明 enabled 布尔值(Boolean)。 true | false true : 默认值。滤镜激活。 false : 滤镜被禁止。 设置或检索滤镜是否激活。 color color 设置或检索此滤镜作用的颜色值。 direction 0（上），45（右上） 90（右），135（右下） 180（下），225（左下） 270（左），315（左上） 设置或检索滤镜效果的运动偏移方向。 strength 整数值(Integer)。单位为像素 设置或检索以对象为基准的在运动方向上的向外扩散距离。