如果我們能夠合理的使用CSS濾鏡，就可以減少網(wǎng)頁(yè)使用圖片的數(shù)量，從而減少網(wǎng)頁(yè)大小；也可以通過(guò)直接修改CSS中濾鏡的參數(shù)或者用JS動(dòng)態(tài)的修改CSS濾鏡參數(shù)，從而達(dá)到快速更新頁(yè)面的效果。

CSS濾鏡是什么

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

CSS濾鏡的使用方法

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

如何應(yīng)用CSS濾鏡

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

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

CSS濾鏡的語(yǔ)法

Alpha濾鏡:

聽(tīng)到這個(gè)名字，你可能會(huì)想到Flash里有，Photoshop里也似乎見(jiàn)過(guò)。一點(diǎn)不錯(cuò)，它們的作用基本類似，就是把一個(gè)目標(biāo)元素與背景混合。你可以指定數(shù)值來(lái)控制混合的程度。這種“與背景混合"通俗地說(shuō)就是一個(gè)元素的透明度.

語(yǔ)法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"

說(shuō)明：
Opacity：起始值，取值為0～100,0為透明，100為原圖。
FinishOpacity：目標(biāo)值。
Style：1或2或3
StartX：任意值
StartY：任意值

例子：

filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")  
 

使用實(shí)例詳見(jiàn):CSS濾鏡(Filter)應(yīng)用實(shí)例集錦-alpha濾鏡#p#

Blur濾鏡:

是CSS的濾鏡之一，把它加載到文字上，可產(chǎn)生立體字的效果，這將為你在網(wǎng)頁(yè)上使用立體字做標(biāo)題帶來(lái)了極大的方便，也為你的網(wǎng)頁(yè)減輕了分量；把Blur濾鏡加載到圖片上，能使你的圖片增色不少，雖然用圖象處理軟件也能達(dá)到同樣效果，但用Blur濾鏡可方便多了.

語(yǔ)法：STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"

 說(shuō)明：
Add：一般為1，或0。
Direction：角度，0～315度，步長(zhǎng)為45度。
Strength：效果增長(zhǎng)的數(shù)值，一般5即可。

例子：

filter:Blur(Add="1",Direction="45",Strength="5")  
 

使用實(shí)例詳見(jiàn):CSS濾鏡(Filter)應(yīng)用實(shí)例集錦-blur濾鏡

Chroma濾鏡:

設(shè)置對(duì)象的色彩濃度
 

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

說(shuō)明：color：#rrggbb格式，任意。
 

例子：

filter:Chroma(Color="#FFFFFF")  
 

使用實(shí)例詳見(jiàn):CSS濾鏡(Filter)應(yīng)用實(shí)例集錦-Chroma濾鏡

DropShadow濾鏡:

顧名思義就是添加對(duì)象的陰影效果。它的實(shí)際效果看上去就象是原來(lái)的對(duì)象離開(kāi)了頁(yè)面，然后在頁(yè)面上顯示出該對(duì)象的投影。其工作原理是建立一個(gè)偏移量，然后加上顏色.

語(yǔ)法：STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"

 說(shuō)明：Color:#rrggbb格式，任意。
Offx：X軸偏離值。
Offy：Y軸偏離值。
Positive：1或0。

例子：

filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")  
 

 FlipH濾鏡:

實(shí)現(xiàn)水平反轉(zhuǎn)

語(yǔ)法：STYLE="filter:FlipH"

例子：filter:FlipH

FlipV濾鏡:

濾鏡實(shí)現(xiàn)垂直反轉(zhuǎn)
 

語(yǔ)法：STYLE="filter:FlipV"

例子：filter:FlipV。

#p#

Glow濾鏡:

對(duì)一個(gè)對(duì)象使用"glow"屬性后，這個(gè)對(duì)象的邊緣就會(huì)產(chǎn)生類似發(fā)光的效果

語(yǔ)法：STYLE="filter:Glow(Color=color,Strength=strength)"

說(shuō)明：
Color：發(fā)光顏色。
Strength：強(qiáng)度(0－100)

例子：

filter:Glow(Color="#6699CC",Strength="5")  
 

Gray濾鏡:

使用Gray濾鏡可以把一張圖片變成灰度圖

語(yǔ)法：STYLE="filter:Gray"

例子：filter:Gray

Invert濾鏡:

顧名思義，使對(duì)象反轉(zhuǎn)倒置

語(yǔ)法：STYLE="filter:Invert"

例子：filter:Invert

Mask濾鏡:

使用"MASK"屬性可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴著有色眼鏡看物體一樣

語(yǔ)法：STYLE="filter:Mask(Color=color)"

例子：

filter:Mask(Color="#FFFFE0")  
 

#p#Shadow濾鏡:

利用“Shadow"屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個(gè)單位。它的默認(rèn)值是向左的270度。

語(yǔ)法：filter:Shadow(Color=color,Direction=direction)

說(shuō)明：
Color：#rrggbb格式。
Direction：角度，0-315度，步長(zhǎng)為45度。

例子：

filter:Shadow(Color="#6699CC",Direction="135")  
 

 Wave濾鏡:

看它的名稱你可能就能想到其效果，正如你想的那樣，它的作用是把對(duì)象按照垂直的波形樣式扭曲，從而產(chǎn)生一種特殊的效果

語(yǔ)法：filter:Wave(Add=add，F(xiàn)req=freq，LightStrength=strength，Phase=phase，Strength=strength)

說(shuō)明：
Add：一般為1，或0。
Freq：變形值。
LightStrength：變形百分比。
Phase：角度變形百分比。
Strength：變形強(qiáng)度。

例子：

filter:wave(Add="0",Phase="4",Freq="5",
LightStrength="5",Strength="2")  
 

 Xray濾鏡:

只顯示對(duì)象的輪廓

語(yǔ)法：STYLE="filter:Xray"

例子：filter:Xray

本文來(lái)自CSS在線：http://www.csscss.org/cssarticle/2009522102.shtml

【編輯推薦】

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