深入學習CSS濾鏡概念和語法
如果我們能夠合理的使用CSS濾鏡，就可以減少網(wǎng)頁使用圖片的數(shù)量，從而減少網(wǎng)頁大小；也可以通過直接修改CSS中濾鏡的參數(shù)或者用JS動態(tài)的修改CSS濾鏡參數(shù)，從而達到快速更新頁面的效果。
CSS濾鏡是什么
CSS濾鏡是對常規(guī)的CSS的一個擴展子集，可以使應用對象(文字,圖片,HTML元素...)產(chǎn)生類似于PHOTOSHOP中的模糊,通透,邊緣發(fā)光等效果。合理的使用CSS濾鏡,可以減少網(wǎng)頁使用圖片的數(shù)量,從而減少網(wǎng)頁大小;也可以通過直接修改CSS中濾鏡的參數(shù)或者用JS動態(tài)的修改CSS濾鏡參數(shù),從而達到快速更新頁面的效果。CSS濾鏡豐富了網(wǎng)頁作為多媒體向用戶提供豐富多彩的資訊內(nèi)容的展現(xiàn)方式。
CSS濾鏡的使用方法
filter:filtername(parameters) 即filter:濾鏡名稱（參數(shù)）
如何應用CSS濾鏡
1、先定義好CSS，再在頁面中需要的對象上使用預先定義好的CSS，實際上CSS的設(shè)置對話框里已經(jīng)預先將這些濾鏡的語法設(shè)置好了，我們只需填上適合的具體參數(shù)即可：
2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSSfilter代碼。
CSS濾鏡的語法
Alpha濾鏡:
聽到這個名字，你可能會想到Flash里有，Photoshop里也似乎見過。一點不錯，它們的作用基本類似，就是把一個目標元素與背景混合。你可以指定數(shù)值來控制混合的程度。這種“與背景混合"通俗地說就是一個元素的透明度.
語法：STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity，Style=style,StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=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的濾鏡之一，把它加載到文字上，可產(chǎn)生立體字的效果，這將為你在網(wǎng)頁上使用立體字做標題帶來了極大的方便，也為你的網(wǎng)頁減輕了分量；把Blur濾鏡加載到圖片上，能使你的圖片增色不少，雖然用圖象處理軟件也能達到同樣效果，但用Blur濾鏡可方便多了.
語法：STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"
說明：
Add：一般為1，或0。
Direction：角度，0～315度，步長為45度。
Strength：效果增長的數(shù)值，一般5即可。
例子：
- filter:Blur(Add="1",Direction="45",Strength="5")
使用實例詳見:CSS濾鏡(Filter)應用實例集錦-blur濾鏡
Chroma濾鏡:
設(shè)置對象的色彩濃度
語法：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濾鏡:
實現(xiàn)水平反轉(zhuǎn)
語法：STYLE="filter:FlipH"
例子：filter:FlipH
FlipV濾鏡:
濾鏡實現(xiàn)垂直反轉(zhuǎn)
語法：STYLE="filter:FlipV"
例子：filter:FlipV。
#p#
Glow濾鏡:
對一個對象使用"glow"屬性后，這個對象的邊緣就會產(chǎn)生類似發(fā)光的效果
語法：STYLE="filter:Glow(Color=color,Strength=strength)"
說明：
Color：發(fā)光顏色。
Strength：強度(0－100)
例子：
- filter:Glow(Color="#6699CC",Strength="5")
Gray濾鏡:
使用Gray濾鏡可以把一張圖片變成灰度圖
語法：STYLE="filter:Gray"
例子：filter:Gray
Invert濾鏡:
顧名思義，使對象反轉(zhuǎn)倒置
語法：STYLE="filter:Invert"
例子：filter:Invert
Mask濾鏡:
使用"MASK"屬性可以為對象建立一個覆蓋于表面的膜，其效果就象戴著有色眼鏡看物體一樣
語法：STYLE="filter:Mask(Color=color)"
例子：
- filter:Mask(Color="#FFFFE0")
#p#Shadow濾鏡:
利用“Shadow"屬性可以在指定的方向建立物體的投影，COLOR是投影色，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上，然后每45度為一個單位。它的默認值是向左的270度。
語法：filter:Shadow(Color=color,Direction=direction)
說明：
Color：#rrggbb格式。
Direction：角度，0-315度，步長為45度。
例子：
- filter:Shadow(Color="#6699CC",Direction="135")
Wave濾鏡:
看它的名稱你可能就能想到其效果，正如你想的那樣，它的作用是把對象按照垂直的波形樣式扭曲，從而產(chǎn)生一種特殊的效果
語法：filter:Wave(Add=add，F(xiàn)req=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
【編輯推薦】
