使用樣式表的人，都會對濾鏡產生深刻的印象。這是因為我們在編寫網頁的時候，即使我們不用圖片，通過樣式表濾鏡，只需簡單的操作，也同樣可以使我們的文字，圖片或者按鈕鮮艷無比，充滿生氣，從而增強了自己網頁的視覺效果。也許正是那些光怪陸離的濾鏡，激發了許多人的興趣和熱情，樣式表也因此贏得了眾多網頁制作者的青睐。那麼，濾鏡是什麼呢？簡單的說吧，它們是一些程序，能夠對對象進行復雜的計算，獲得常規操作難以實現的“專業”效果。
從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>