本節為大家介紹了css中filter濾鏡，包括靜態濾鏡及動態濾鏡的使用方法，不了解的朋友可以參考下：
一、css靜態濾鏡樣式 （filter）（只有ie4.0以上支援）
css靜態濾鏡樣式的使用方法：{ filter : filtername( parameters1, parameters2, ...) }
filter樣式簡單說明支援參數
alpha：設定圖片或文字的不透明度opacity、finishopacity、style、startx、starty、finishx、finishy、add、direction、strength
blur：在指定的方向和位置上產生動態模糊效果add、direction、strength
chroma：對所選的顏色進行透明處理color
dropshadow：在指定的方向和位置上產生陰影color 、offx、offy、positive
fliph：沿水平方向翻轉物件
flipv：沿垂直方向翻轉物件
glow：在物件周圍發光color、strength
gray：將物件以灰階處理
invert：逆轉物件顏色
light：對物件進行模擬光照
mask：對物件產生遮罩color
shadow：沿對象邊緣產生陰影color、direction
wave：垂直方向產生正弦波形add、freq、lightstrength、phase、strength
xray：改變物件顏色深度，並繪製黑白圖象
以上就是靜態濾鏡的全部內容，要注意的是css是區分大小寫的！
二、css動態濾鏡
動態濾鏡可為頁面加入動人的淡入淡出、圖象轉換效果，它可以分為兩種blend（混合）和reveal（顯示），前者可以使物件漸漸消失或出現，後者提供了24種圖象轉換的效果。對於動態濾鏡的呼叫除去像在靜態濾鏡中要定義的濾鏡類型，參數等等，也用到腳本語言控制它的狀態。
首先，在開始一個動態效果之前，先需要進行裝備（apply），然後播放（play）動態效果，在動態效果進行中還可以中斷動態效果（stop），以上可以用下面的方法實作：
物件名稱.filters(濾鏡數值).apply()
物件名稱.filters(濾鏡數值).play()
物件名稱。濾鏡數值).stop()
對於濾鏡狀態的判斷可以透過「物件名稱.filters(濾鏡數值).status」判斷，數值為0時，表示濾鏡未執行，為1時，表示濾鏡已經完成，為2時表示濾鏡在執行中。
在定義filter時，如上面所提到的，可以有混合（“filter:blendtrans(duration=時間數值)”，duration表示濾鏡執行需要的時間，單位為秒）和顯示（“filter: revealtrans(duration=時間數值,transition=過渡類型)”，過渡類型為從0－23的數值）兩種。
濾鏡目前還未被w3c正式承認。濾鏡只是微軟ie瀏覽器的組成部分，不能用於netscape瀏覽器。制定有關標準的組織正在就此進行討論，但尚未達成最後定論。在我看來，濾鏡是一種非常有趣且是製作精彩的視覺效果必不可少的一部分。濾鏡能節省頻寬，而且是你能在製作奇妙的
視覺設計時使用文字格式，而不必先製作龐大的文字位圖以取得相同的效果。
但由於這些功能尚未成為html的正式組成部分，所以並不是所有的瀏覽器都能看到這些特色。有些時候，你必須考慮以傳統的方式製作相同的效果，當然，你必須繼續將龐大的gif檔案塞到網頁之中。
沉默...沉默...
三、css濾鏡filter詳解
語法：
STYLE="filter:filtername(fparameter1, fparameter2...)"
（filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
濾鏡說明：
alpha：設定透明層次
blur：創造高速度移動效果，即模糊效果
chroma：製作專用顏色透明
dropshadow：創造物件的固定影子
fliph：建立水平鏡像圖片
flipv：建立垂直鏡像圖片
glow：加光輝在附近物件的邊外
gray：把圖片灰階化
invert：反色
light：建立光源在物件上
mask：建立透明掩膜在物件上
shadow：建立偏移固定影子
wave：波紋效果
xray：使物件變得像被x光照射一樣
1、濾鏡：alpha
語法：
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")
2、濾鏡：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")
3、濾鏡：chroma
語法：
style="filter:chroma(color = color)"
說明：color：#rrggbb格式，任一。
範例：filter:chroma(color="#ffffff")
4、濾鏡：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")
5、濾鏡：fliph
語法：
style="filter:fliph"
範例：filter:fliph
6、濾鏡：flipv
語法：style="filter:flipv"
範例：filter:flipv
7、濾鏡：glow
語法：style="filter:glow(color=color, strength=strength) "
說明：
color：發光顏色。
strength：強度(0－100)
範例：filter:glow(color="#6699cc",strength="5")
8、濾鏡：gray
語法：style="filter:gray"
範例：filter:gray
9、濾鏡：invert
語法：style="filter:invert"
範例：filter:invert
10、濾鏡：mask
語法：style="filter:mask(color=color)"
範例：filter:mask (color="#ffffe0")
11、濾鏡：shadow
語法：filter:shadow(color=color, direction=direction)
說明：
color ：#rrggbb格式。
direction：角度，0－315度，步長為45度。
範例：filter:shadow (color="#6699cc", direction="135")
12、濾鏡：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")
13、濾鏡：xray
語法：style="filter:xray"
範例：filter:xray
