1.Alpha濾鏡
語法:
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
代碼：
<font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
從效果中我們可以看出，Alpha濾鏡使對象呈漸變透明的效果，其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中：
opacity屬性：設置透明度，取值0至100之間的任意數值，100表示完全不透明； style屬性：設置漸變風格，0表示均勻漸變，1表示線性漸變，2表示放射漸變，3表示直角漸變。
而width:100%則表示參與漸變的對象的寬度，通常都設置為100%。
2. Blur濾鏡
語法:
Blur(Add=?, Direction=?, Strength=?)
Motion Blur濾鏡表現的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標，其值為0和1，0表示“否”，用於文字，1表示“是”，用於圖像；Direction屬性是模糊移動的角度，其值為0至360度；Strength屬性是模糊移動的距離。
代碼：
<font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
3.Chroma 濾鏡
語法:
{filter:chroma(color=color)}
使用”Chroma"屬性可以設置一個對象中指定的顏色為透明色，參數COLOR即要透明的顏色。
4.Drop Shadow濾鏡
語法:
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Drop Shadow濾鏡主要產生重疊效果。其屬性為：
color屬性：設置影子文本的顏色；
offX和offY屬性：影子文本下落的位移值；
Positive屬性：指定透明象素陰影，布爾型，0為是，1為否。
代碼：
<font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
5.Flip濾鏡
Flip濾濾鏡主要是產生兩種變換效果，即上下變換和左右變換。FlipV產生上下變換，FlipH產生左右變換。
代碼：
<font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
<p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font></p>
6.Glow濾鏡
語法:
Glow(Color=?, Strength=?)
Glow濾鏡生成一種光暈效果。屬性：
color屬性：光暈顏色；strength：光暈的厚度。
代碼：
<font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
7.Light 濾鏡
這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性，那麼就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有：
·AddAmbIEnt 加入包圍的光源
·AddCone 加入錐形光源
·AddPoint 加入點光源
·Changcolor 改變光的顏色
·Changstrength 改變光源的強度
·Clear 清除所有的光源
·MoveLight 移動光源
可以定義光源的虛擬位置，以及通過調整X軸和Y軸的數值來控制光源焦點的位置，還可以調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態的設置光源，可能回產生一些意想不到的效果。
8.Shadow濾鏡
語法:
Shadow(Color=?, Direction=?)
與Drop Shadow的影子特性不同，Shadow濾鏡產生一種陰影效果，它的屬性比較簡單：
color屬性：陰影顏色；
direction屬性：陰影角度，值取0至360度。
代碼：
<font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
9.Wave濾鏡
語法:
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
此濾鏡對過濾對象生成正弦波變形，造成一種變幻效果。內嵌屬性：
add屬性：布爾型，0或1，0表示將原始對象加入最後效果中，1則反之；
freq屬性：決定顯示的頻率，即應出現多少個波形；
phrase屬性：決定波形的形狀，值取0至360之間；
strength屬性：決定波形的振幅。
代碼：
<font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>
10.Gray ,Invert,Xray 濾鏡
語法:
{filter:gray} ,{filter:invert},{filter:xray}
Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對象的可視化屬性全部翻轉，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮，也就是所謂的“X”光片。
代碼：
提示：CSS濾鏡還經常用來修飾圖像。比如用Flip濾鏡，就可以使圖像倒過來顯示。最後請注意：要使用CSS濾鏡，只有在Html編輯模式下編輯發布才有效果。