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

14.顏色變化 
文法： 
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#B5CCFA’, EndColorStr=’#B5CCFA’); 

 

黑白照片 filter: gray;
X光照片 filter: Xray;
風動模糊 filter: blur(add=true,direction=45,strength=30);
正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻轉 filter: fliph;
垂直翻轉 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
馬賽克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
光暈效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2