使用样式表的人，都会对滤镜产生深刻的印象。这是因为我们在编写网页的时候，即使我们不用图片，通过样式表滤镜，只需简单的操作，也同样可以使我们的文字，图片或者按钮鲜艳无比，充满生气，从而增强了自己网页的视觉效果。也许正是那些光怪陆离的滤镜，激发了许多人的兴趣和热情，样式表也因此赢得了众多网页制作者的青睐。那么，滤镜是什么呢？简单的说吧，它们是一些程序，能够对对象进行复杂的计算，获得常规操作难以实现的“专业”效果。
从IE 4.0版开始，浏览器就提供了一些内置的多媒体滤镜特效，网页设计师们正是利用这些样式表滤镜的控制，才很轻松地做出了漂亮的网页。即使你完全不懂样式表这方面的知识，笔者相信下面要叙述的内容你也不难掌握的。但有一个前提，那就是你必须稍微了解一点HTML语法知识，最好还能知道一点有关脚本语言方面的知识。考虑到各种浏览器对样式表的支持方面的因素，笔者建议你使用IE4.0以上版本的浏览器，这样的话，你就会毫不费力地看到所有的特效。
一、样式表滤镜的构成
滤镜作为样式表大家庭中的一员，它跟其他样式表元素的定义和应用方式当然是一样的，能够直接定义在HTML标识的<head>和</head>只间。样式表滤镜的基本语法为：
标记{FILTER : 滤镜名（属性名１＝属性值１，属性名２＝属性值２，....）;}
它所表达的意思是：在该标记范围内的内容，样式表滤镜将按照小括号内的属性名所限定的对象，按属性值所设定的数值进行特效处理。其中标记为HTML语法中的任意标记，如span，p，br等等；滤镜名就是我们下面所涉及到的14种滤镜名称；每一种滤镜它都有自己特定的属性名及其属性值。
例如：p { 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中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。样式表滤镜不仅对图象起作用，同时也适用于文本；在这里笔者为方便叙述，暂用文本作为例子来谈谈滤镜的参数及其作用。
三、滤镜的参数及其作用
1、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>
2、BLUR滤镜
语法：{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>
3、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>
