CSS3 filter屬性

filter屬性用來定義濾鏡效果，它可以改變元素的透明度、對比度、亮度和模糊度等。

很多應用中比較炫酷的效果，都可以藉助此屬性實現。

分享一個利用filter屬性實現的圖片模糊效果，具體參閱CSS滑鼠懸浮圖片模糊切換效果一章節。

瀏覽器相容：

（1）.IE瀏覽器不支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

考慮到當前瀏覽器相容性問題，此屬性前面建議新增瀏覽器廠商字首：

[CSS] 純文字檢視 複製程式碼
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

語法結構：

[CSS] 純文字檢視 複製程式碼
filter:filter(value) filter(value) filter(value);

如果一次設定多個屬性，使用空格分隔。

引數解析：

（1）.filter：這裡的filter是語法結構中的第二個（filter：filter(value)）:

它可能的值有如下：

   Alpha：設定透明層次。

   blur：建立高斯模糊效果。

   Chroma：製作專用顏色透明。

   DropShadow：建立物件的固定影子。

   FlipH：建立水平映象圖片。

   FlipV：建立垂直映象圖片。

   glow：加光輝在附近物件的邊外。

   gray：把圖片灰度化。

   invert：反色。

   light：建立光源在物件上。

   mask：建立透明掩膜在物件上。

   shadow：建立偏移固定影子。

   wave：波紋效果。

   Xray：使物件變得像被x光照射一樣。

（2）.value：對應的filter的引數值。

一.Alpha:

語法結構：

[CSS] 純文字檢視 複製程式碼
filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX，StartY=startY,FinishX=finishX,FinishY=finishY)

引數解析：

（1）.Opacity:起始值，取值為0～100,　0為透明，100為原圖。

（2）.FinishOpacity：目標值。

（3）.Style：1或2或3。

（4）.StartX：任意值。

（5）.StartY：任意值。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

二.blur：

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Blur(Add=add,Direction=direction,Strength=strength)

引數解析:

（1）.Add：一般為1，或0。

（2）.Direction：角度，0～315度，步長為45度。

（3）.Strength：效果增長的數值，一般5即可。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Blur(Add="1",Direction="45",Strength="5")

三.Chroma:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Chroma(Color=color)

引數解析:

（1）.color:顏色值，#rrggbb格式。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Chroma(Color="#FFFFFF")

四.DropShadow:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive);

引數解析:

（1）.Color:#rrggbb格式，任意。

（2）.Offx：X軸偏離值。

（3）.Offy：Y軸偏離值。

（4）.Positive：1或0。

五.FlipH:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:FlipH

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:FlipH

六.FlipV:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:FlipV

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:FlipV

七.glow:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Glow(Color=color,Strength=strength)

引數解析:

（1）.Color：發光顏色。

（2）.Strength：強度(0－100)

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Glow(Color="#6699CC",Strength="5")

八.gray:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Gray

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Gray

九.invert:

[CSS] 純文字檢視 複製程式碼
filter:Invert

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Invert

十.mask:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Mask(Color=color)

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Mask(Color="#FFFFE0")

十一.shadow:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Shadow(Color=color,Direction=direction)

引數解析:

（1）.Color：#rrggbb格式。

（2）.Direction：角度，0－315度，步長為45度。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Shadow(Color="#6699CC",Direction="135")

十二.wave:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

引數解析:

（1）.Add：一般為1，或0。

（2）.Freq：變形值。

（3）.LightStrength：變形百分比。

（4）.Phase：角度變形百分比。

（5）.Strength：變形強度。

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

十三.Xray:

語法結構:

[CSS] 純文字檢視 複製程式碼
filter:Xray

程式碼片段如下:

[CSS] 純文字檢視 複製程式碼
filter:Xray