如果我們能夠合理的使用CSS濾鏡，就可以減少網頁使用圖片的數量，從而減少網頁大小；也可以通過直接修改CSS中濾鏡的參數或者用JS動態的修改CSS濾鏡參數，從而達到快速更新頁面的效果。

CSS濾鏡是什么

CSS濾鏡是對常規的CSS的一個擴展子集，可以使應用對象(文字,圖片,HTML元素...)產生類似于PHOTOSHOP中的模糊,通透,邊緣發光等效果。合理的使用CSS濾鏡,可以減少網頁使用圖片的數量,從而減少網頁大小;也可以通過直接修改CSS中濾鏡的參數或者用JS動態的修改CSS濾鏡參數,從而達到快速更新頁面的效果。CSS濾鏡豐富了網頁作為多媒體向用戶提供豐富多彩的資訊內容的展現方式。

CSS濾鏡的使用方法

filter:filtername(parameters)　即filter:濾鏡名稱（參數）

如何應用CSS濾鏡

1、先定義好CSS，再在頁面中需要的對象上使用預先定義好的CSS，實際上CSS的設置對話框里已經預先將這些濾鏡的語法設置好了，我們只需填上適合的具體參數即可：

2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSSfilter代碼。

CSS濾鏡的語法

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")  
 

使用實例詳見:CSS濾鏡(Filter)應用實例集錦-alpha濾鏡#p#

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")  
 

使用實例詳見:CSS濾鏡(Filter)應用實例集錦-blur濾鏡

Chroma濾鏡:

設置對象的色彩濃度
 

語法：STYLE="filter:Chroma(Color=color)"
 

說明：color：#rrggbb格式，任意。
 

例子：

filter:Chroma(Color="#FFFFFF")  
 

使用實例詳見:CSS濾鏡(Filter)應用實例集錦-Chroma濾鏡

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。

#p#

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")  
 

#p#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在線：http://www.csscss.org/cssarticle/2009522102.shtml

【編輯推薦】

1. CSS中at(@)指示符用法詳解
2. CSS樣式實現快速定位bug的六大技巧
3. CSS中link和@import的區別
4. CSS2.0中page-break-after屬性用法
5. 技術分享 使用不同CSS樣式兼容多種瀏覽器