样式表滤镜的构成
滤镜作为样式表大家庭中的一员，它跟其他样式表元素的定义和应用方式当然是一样的，能够直接定义在HTML标识的<head>和</head>只间。样式表滤镜的基本语法为：
标记｛ＦＩＬＴＥＲ：滤镜名（属性名１＝属性值１，属性名２＝属性值２，....）；｝
它所表达的意思是：在该标记范围内的内容，样式表滤镜将按照小括号内的属性名所限定的对象，按属性值所设定的数值进行特效处理。其中标记为ＨＴＭＬ语法中的任意标记，如ＳＰＡＮ，Ｐ，ＢＲ等等；滤镜名就是我们下面所涉及到的１４种滤镜名称；每一种滤镜它都有自己特定的属性名及其属性值。
例如：Ｐ { filter : alpha(opacity=80,style=1 ); }
以上就是使用样式表滤镜的定义方法。
静态滤镜的种类
在IE4.0以上版本浏览器中，支持以下14种样式表滤镜：
滤镜名 说明
Alpha 让对象呈现渐变半透明效果
Blur 让对象产生风吹模糊的效果
DropShadow 让对象有一个下落式的阴影
Glow 在对象的周围产生光晕而模糊的效果
Chroma 让图像中的某一颜色变成透明色
FlipH 让HTML对象水平转换
FlipV 让HTML对象垂直转换
Wave 让HTML对象产生水平或是垂直方向上的正弦波形
Shadow 让对象产生阴影效果
Mask 利用一个HTML对象在另一个对象上产生图像的遮罩
Light 在HTML元件上放置一个光影
Gray 把一个彩色的图象变成灰色调图象
Invert 让对象产生照片底片的效果
XRay 让对象轮廓突出显示
这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。样式表滤镜不仅对图象起作用，同时也适用于文本；在这里笔者为方便叙述，暂用文本作为例子来谈谈滤镜的参数及其作用。
滤镜的参数及其作用
１、Alpha 滤镜
语法：{FILTER：ALPHA(opacity=属性值１,finishopacity=属性值２,style=属性值３,startx=属性值４,starty=属性值５,finishx=属性值６,finishy=属性值７)}
作用：该滤镜能够使对象呈现渐变半透明效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：Opacity 属性是设置不透明的程度，用百分比表示其属性值，大小是从0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 属性是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果；其属性值也是从0到100，0表是完全透明，100表示完全不透明。
Style属性是用来设置渐变风格的，当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用来指定渐进的显示形状，０代表均匀渐进；１代表线形渐进；２代表放射渐进；３代表直角渐进。
StartX 属性是用来设置水平方向渐进的起始位置。
FinishX属性是用来设置水平方向渐进的结束位置。
FinishY属性是用来设置竖直方向渐进的结束位置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
２、ＢＬＵＲ滤镜
语法：{filter:blur(add=属性值１,direction=属性值２,strength=属性值３)；}
作用：该滤镜能够使对象表现一种模糊的效果，其效果是由小括号中的各属性名及其对应的属性值决定。
参数：add属性是用来确定是否在运动模糊中使用原有目标，其属性值有０和１两种，０属性值意思是在模糊运动中不使用原有目标，大多数情况下适用于图象；１属性值代表在模糊运动中使用原有目标，大多数情况下适用于文本。
direction属性是用来表示模糊移动时的角度，其属性值为０到３６０度。
strength属性是用来表示模糊移动时的距离，该属性值一般可以任意设置。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:blur(add=1,direction=60,strength=2);}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
３、DropShadow 滤镜
语法：{filter:dropshadow(color=属性值１,offx=属性值２,offy=属性值３,positive=属性值４)；}
作用：该滤镜主要是用来产生重叠效果的，其效果是由小括号中的各属性名及其对应的属性值来产生的。
参数：ＣＯＬＯＲ属性是用来设置投影文字的颜色。
offＸ属性是代表投影文字与原文字之间水平方向上的偏移量。
offＹ属性是代表投影文字与原文字之间垂直方向上的偏移量。
positive属性是一个布尔值（０或者１），如果为"TRUE（非0）"，那么就为任何的非透明像素建立可见的投影；如果为"FASLE（0）"，那么就为透明的像素部分建立透明效果。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);color:#00ff11}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
４、Glow 滤镜
语法：{filter:glow(color=属性值１,strength＝属性值２)；}
作用：该滤镜能够在原对象周围产生一种类似发光的效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。
参数：COLOR属性是指定发光的颜色。
STRENGTH则是发光强度的表现，也指光晕的厚度；其大小可以从1到255之间的任何整数来指定这个强度。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:glow(color=#880088,strength=3);}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
５、Chroma 滤镜
语法：{filter:chroma(color=属性值)；}
作用：该滤镜能够使图像中的某一颜色变成透明色。
参数： COLOR属性用来指定要变为透明色的颜色，通过该属性值的设定，我们可以来过滤某图象中的指定颜色。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:chroma(color=#0000fe)；}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
６、FlipH 滤镜
语法：{filter:filph}
作用：该滤镜能够使ＨＴＭＬ对象进行左右对换，一般适用于图象对象。
参数：该滤镜没有参数。
７、FlipＶ 滤镜
语法：{filter:filpv}
作用：该滤镜能够使ＨＴＭＬ对象进行上下对换，一般适用于图象对象。
参数：该滤镜没有参数。
８、Wave 滤镜
语法：{filter:wave(add=属性值１,freq=属性值２,lightstrength=属性值３,phase=属性值４,strength=属性值５)；}
作用：该滤镜能够使被过滤对象生成正弦波形，从而能造成一种变形幻觉，其具体效果是由小括号中的各属性名及其对应的属性值来产生的，一般适用于图象对象。
参数：add属性是一个布尔值，它用来决定是否将原始图象加入最后的效果之中。
freq属性是指波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹。
phase属性是用来设置正弦波的偏移量，也就是决定波形的形状，其属性值的取值范围为从０到３６０度。
lightstrength属性可以对于波纹增强光影的效果，其取值范围为从0到100。
strength属性是用来决定波形振幅的大小。
９、Shadow 滤镜
语法：{filter:shadow(color=属性值１,direction=属性值２)；}
作用：该滤镜能够使对象产生一种阴影效果，其具体效果是由小括号中的各属性名及其对应的属性值来产生的。
参数：color属性是用来设置阴影的颜色。
direction属性是用来设置投影的方向，取值范围为０度到３６０度，其中0度代表垂直向上，然后每45度为一个单位，该属性的默认值是向左的270度。
实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>样式表滤镜实例</title>
<style>
<!--
p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }
p {filter:shadow(color=＃00ff00,direction=２)；}
-->
</style>
</head>
<body>
<p>样式表滤镜实例</p>
</body>
</html>
１０、Mask 滤镜
语法：{filter:mask(color=属性值)；}
作用：该滤镜能够利用一个HTML对象在另一个对象上产生图像的遮罩 ，可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样，一般适用于图象对象。
参数：color属性就是用来指定要被遮罩的颜色。
１１、 Light 滤镜
语法：{Filter：light｝
作用：该滤镜能够使ＨＴＭＬ对象产生一种模拟光源的投射效果。一旦为对象定义了light滤镜属性，那么就可以调用它的方法来设置或者改变属性。light可用的方法有：
MoveLight 移动光源
Changcolor 改变光的颜色
AddAmbient 加入包围的光源
AddPoint 加入点光源
Clear 清除所有的光源
AddCone 加入锥形光源
Changstrength 改变光源的强度
可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源，可能回产生一些意想不到的效果。
参数：该滤镜没有参数。
１２、Gray 滤镜
语法：{filter:gray}
作用：该滤镜能够使一张彩色的图片转变为灰色调图象，一般适用于图象对象。
参数：该滤镜没有附带参数。
１３、Invert 滤镜
语法：{filter:invert}
作用：该滤镜能够使图象产生照片底片的效果，一般适用于图象对象。
参数：该滤镜没有参数。
１４、Xray 滤镜
语法：{filter:xray}
作用：该滤镜能够让对象反映出它的轮廓并把这些轮廓加亮显示，一般适用于图象对象。
参数：该滤镜没有参数。
评论