?從IE 4.0版開始，瀏覽器就提供了一些內置的多媒體濾鏡特效，網頁設計師們正是利用這些樣式表濾鏡的控制，才很輕松地做出了漂亮的網頁。即使你完全不懂樣式表這方面的知識，筆者相信下面要敘述的內容你也不難掌握的。但有一個前提，那就是你必須稍微了解一點HTML語法知識，最好還能知道一點有關腳本語言方面的知識。考慮到各種瀏覽器對樣式表的支持方面的因素，筆者建議你使用IE4.0以上版本的瀏覽器，這樣的話，你就會毫不費力地看到所有的特效。
一、樣式表濾鏡的構成
濾鏡作為樣式表大家庭中的一員，它跟其他樣式表元素的定義和應用方式當然是一樣的，能夠直接定義在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}
作用：該濾鏡能夠讓對象反映出它的輪廓并把這些輪廓加亮顯示，一般適用于圖象對象。
參數：該濾鏡沒有參數。