這篇文章只要講了CSS濾鏡的使用方法，非常詳細，有需要的小夥伴可以參考一下，希望對你有用。
CSS濾鏡的使用方法：filter:filtername(parameters) 即filter:濾鏡名稱（參數）
alpha：設定透明層次
blur：建立高速度移動效果，即模糊效果
chroma：製作專用色彩透明
DropShadow：建立物件的固定影子
FlipH：建立水平鏡像圖片
FlipV：建立垂直鏡像圖片
glow：加光輝在附近對象的邊外
gray：把圖片灰階化
invert：反色
light：建立光源在物件上
mask：建立透明遮罩在物件上
shadow：建立偏移固定影子
wave：波紋效果
Xray：使物件變得像被x光照射一樣
#具體的應用有兩種方法：
1、先定義好CSS ，再在頁面中需要的物件上使用預先定義好的CSS，實際上CSS的設定對話框裡已經預先將這些濾鏡的語法設定好了，我們只需填上適合的特定參數即可。
2、直接在支援CSS濾鏡效果的HTML控制項元素上編寫CSS filter程式碼。
Alpha濾鏡: 聽到這個名字，你可能會想到Flash裡面有，Photoshop裡也似乎看過。一點不錯，它們的作用基本上類似，就是把一個目標元素與背景混合。你可以指定數值來控制混合的程度。這種「與背景混合」通俗地說就是一個元素的透明度.
語法：STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY ，FinishX=finishX，FinishY=finishY)"
說明：
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標值。
Style：1或2或3
StartX：任意值
StartY：任意值
範例：filter:Alpha(Opacity="0″,FinishOpacity="75″,Style="2″ )
Blur濾鏡:是CSS的濾鏡之一，把它加載到文字上，可產生立體字的效果，這將為你在網頁上使用立體字做標題帶來了極大的方便，也為你的網頁減輕了分量；把Blur濾鏡加載到圖片上，能使你的圖片增色不少，雖然用圖象處理軟體也能達到同樣效果，但用Blur濾鏡可方便多了.
語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說明：
Add：一般為1，或0。
Direction：角度，0～315度，步長為45度。
Strength：效果成長的數值，一般5即可。
範例：filter:Blur(Add="1″,Direction="45″,Strength="5″)
Chroma濾鏡:設定物件的色彩濃度
語法：STYLE=" filter:Chroma(Color = color)"
說明：color：#rrggbb格式，任一。
範例：filter:Chroma(Color="#FFFFFF")
DropShadow濾鏡:顧名思義就是添加物件的陰影效果。它的實際效果看起來就像是原來的物件離開了頁面，然後在頁面上顯示出該物件的投影。其運作方式是建立一個偏移量，然後加上顏色.
語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
說明：Color :#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。
範例：filter:DropShadow(Color="#6699CC",OffX="5″,OffY="5″,Positive="1″)
FlipH濾鏡:實現水平反轉
語法：STYLE="filter:FlipH"
範例：filter:FlipH
FlipV濾鏡:濾鏡實作垂直反轉
語法：STYLE="filter:FlipV"
範例：filter: FlipV
Glow濾鏡:對一個物件使用"glow"屬性後，這個物件的邊緣就會產生類似發光的效果
語法：STYLE="filter:Glow(Color=color, Strength= strength)"
說明：
Color：發光顏色。
Strength：強度(0－100)
範例：filter:Glow(Color="#6699CC",Strength="5″)
Gray濾鏡:使用Gray濾鏡可以把一張圖片變成灰階圖
語法：STYLE="filter:Gray"
範例：filter:Gray
Invert濾鏡:顧名思義，讓物件反轉倒置
語法：STYLE="filter:Invert"
範例：filter:Invert
Mask濾鏡:使用"MASK"屬性可以為物件建立一個覆蓋於表面的膜，其效果就像戴著有色眼鏡看物體一樣
語法：STYLE="filter:Mask(Color=color)"
範例：filter:Mask (Color="#FFFFE0″)
Shadow濾鏡:利用「Shadow "屬性可以在指定的方向建立物件的投影，COLOR是投影色，DIRECTION是設定投影的方向。其中0度代表垂直向上，然後每45度為一個單位。它的預設值是向左的270度。
語法：filter:Shadow(Color=color, Direction=direction)
說明：
Color：#rrggbb格式。
Direction：角度，0－315度，步長為45度。
範例：filter:Shadow (Color="#6699CC", Direction="135″)
Wave濾鏡:看它的名稱你可能就能想到其效果，正如你想的那樣，它的作用是把物體按照垂直的波形樣式扭曲，從而產生一種特殊的效果
語法： filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
說明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強度。
範例：filter: wave(Add="0″, Phase="4″, Freq="5″, LightStrength="5″, Strength="2″)
Xray濾鏡:只顯示物件的輪廓
語法：STYLE="filter:Xray"
範例：filter:Xray
以上是深入理解CSS中的filter屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
