CSS3中filter濾鏡的學習筆記(靜態濾鏡及動態濾鏡)

本節為大家介紹了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