CSS濾鏡參考（收集）

CSS濾鏡參考（收集）

" f5 D( I* `1 m/ A7 N語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
　　（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
5 P- n8 w$ f, y  Kscript 語法：HTMLElement.filters.filterName.fParameter=value;

　　濾鏡說明：
" N# o& `( k. j! f& G2 X
% n- Z, L+ c2 J- ?. D: K　　Alpha：設置透明層次
　　blur：創建高速度移動效果，即模糊效果
　　Chroma：製作專用顏色透明
( U2 l1 C2 m, U& ]　　DropShadow：創建對象的固定影子
, v9 ]/ {+ Z% v9 j; z　　FlipH：創建水平鏡像圖片
　　FlipV：創建垂直鏡像圖片
' d; u  [- g' n  k2 ^( ?' d　　glow：加光輝在附近對象的邊外
　　gray：把圖片灰度化
　　invert：反色
　　light：創建光源在對像上
+ ~8 _: j/ Y% o/ b3 c9 x) x3 R　　mask：創建透明掩膜在對像上
4 K/ F* \* ^  O2 r　　shadow：創建偏移固定影子
　　wave：波紋效果
　　Xray：使對像變得像被x光照射一樣
5 \6 b# s; ?+ p; r
　　1、濾鏡：Alpha
5 e- X2 a0 G4 D5 Z　　語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
　　說明：
" c' z- S+ ?2 s4 d4 n　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。
0 O- w% M+ X  l- V5 d9 p" r( |　　FinishOpacity：目標值。
　　Style：1或2或3
1 k0 d; Z7 h$ Z4 G5 l: Z　　StartX：任意值
　　StartY：任意值
9 z; `- E* I8 w' y6 A* x& E8 _* R　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
. x4 L+ `3 ?+ ^$ i
9 e& @4 s2 P9 s! j6 _. }　　2、濾鏡：blur
; s: v' A/ [) p5 l. Z9 S7 F- D& y　　語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
) I1 `0 A( A3 Y: D6 E　　說明：
　　Add：一般為1，或0。
　　Direction：角度，0～315度，步長為45度。
- F1 a3 V; h/ h1 `　　Strength：效果增長的數值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")
4 v0 P6 h" ?* F! l( O' i  l7 M
　　3、濾鏡：Chroma
　　語法：STYLE="filter:Chroma(Color = color)"
) ?& L  {9 {" F' z: m  C　　說明：color：#rrggbb格式，任意。
/ t* }5 c* j+ p3 T" R　　例子：filter:Chroma(Color="#FFFFFF")

5 j0 c& D$ w6 O$ P  W　　4、濾鏡：DropShadow
　　語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
　　說明：Color:#rrggbb格式，任意。
　　Offx：X軸偏離值。
! H2 ?% @( P. X8 l　　Offy：Y軸偏離值。
+ T. t2 T" |8 Q7 G- L! o  c+ a, l　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
2 f4 H% w8 R6 J' h1 u# ^
　　5、濾鏡：FlipH
7 M9 f& k7 U- w9 O5 a7 H3 C　　語法：STYLE="filter:FlipH"
　　例子：filter:FlipH
7 Q1 {9 K6 e# d+ g# C) O& E+ d& f; s- Y
' U2 V+ T9 z' G　　6、濾鏡：FlipV
3 n$ O, n0 z" t8 k8 X8 h1 \* U　　語法：STYLE="filter:FlipV"
" q/ Z1 J* n- f6 v4 g$ i4 h　　例子：filter:FlipV

　　7、濾鏡：glow
+ E1 R8 _$ {" n" B' K0 o1 r　　語法：STYLE="filter:Glow(Color=color, Strength=strength)"
　　說明：
　　Color：發光顏色。
　　Strength：強度(0－100)
* ~3 W; t( Y! w, `! b0 d( X. K　　例子：filter:Glow(Color="#6699CC",Strength="5")
3 D6 i. H! v6 w5 c9 J; y
　　8、濾鏡：gray
　　語法：STYLE="filter:Gray"
7 K' G# M3 D( [. b! J1 m　　例子：filter:Gray

! V1 U5 h: T) q　　9、濾鏡：invert
　　語法：STYLE="filter:Invert"
/ C: u2 U4 `# c3 N　　例子：filter:Invert
3 X: n4 T1 k$ [
2 v9 A8 G9 M& W4 q! I& A　　10、濾鏡：mask
0 V2 M( b, ~5 I　　語法：STYLE="filter:Mask(Color=color)"
& {. H3 X! M2 S: q/ h0 [- Y　　例子：filter:Mask (Color="#FFFFE0")
0 ^  T6 M9 I; p5 f
　　11、濾鏡：shadow
, Z4 C$ V  Y) s) s9 q3 S　　語法：filter:Shadow(Color=color, Direction=direction)
$ ]4 g2 ~+ S+ Q7 o; ]" [　　說明：
% T0 s" p- A" `; x: `　　Color：#rrggbb格式。
　　Direction：角度，0－315度，步長為45度。
: U0 W7 g9 ?$ c# ~3 O+ o　　例子：filter:Shadow (Color="#6699CC", Direction="135")
+ T' n( S# u1 H% q; B" y) V; n
" D2 E2 y: W2 w+ q　　12、濾鏡：wave
& u) C5 W3 ?7 I% V5 V　　語法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　說明：
( Z+ [' Z! A2 A3 \# {/ u　　Add：一般為1，或0。
　　Freq：變形值。
: B$ @7 z) k# ~, H! P# U　　LightStrength：變形百分比。
　　Phase：角度變形百分比。
　　Strength：變形強度。
( W/ j4 Q" f$ a: U9 ?0 r4 J　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、濾鏡：Xray
　　語法：STYLE="filter:Xray"
　　例子：filter:Xray
6 N6 u6 Z! ]* D* }& l
% T' J) m& g: q' x/ Q
註：ZT！

[[i] 本帖最後由 wuhao 於 2006-7-30 11:01 編輯 [/i]]