CSS濾鏡參考（收集）

CSS濾鏡參考（收集）

語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
: U4 A/ m; N8 _. j2 `　　（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
script 語法：HTMLElement.filters.filterName.fParameter=value;
: _( l1 P* [1 r8 @
  W, ]9 O2 K$ z" A　　濾鏡說明：

　　Alpha：設置透明層次
4 j# }! o; O9 v/ m$ s　　blur：創建高速度移動效果，即模糊效果
  d  @* S5 |2 b, A　　Chroma：製作專用顏色透明
, o5 |. [' B$ d0 m6 _　　DropShadow：創建對象的固定影子
- N4 C4 e- W/ s% L0 i$ j　　FlipH：創建水平鏡像圖片
/ L/ f6 V! N& z% l# j; o5 G　　FlipV：創建垂直鏡像圖片
　　glow：加光輝在附近對象的邊外
) I+ H& d9 W& C, `9 B, d7 o　　gray：把圖片灰度化
' f4 ^+ ~/ ?- ?6 l' T% Q4 a　　invert：反色
5 Q7 _8 _  z6 S　　light：創建光源在對像上
; B8 \! f8 K; q8 I" W9 r3 ~　　mask：創建透明掩膜在對像上
* S) M1 f6 V/ \! r7 X% z8 E" U0 l　　shadow：創建偏移固定影子
! |: P! a0 N: j7 J　　wave：波紋效果
% x& h/ x# o% t; B, i/ k　　Xray：使對像變得像被x光照射一樣

　　1、濾鏡：Alpha
. x+ n2 G! Q3 u" U* [5 F3 j0 i; T　　語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
2 C' s, k$ F* T( D; u　　說明：
　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。
. ~( ~5 @" }, b2 _　　FinishOpacity：目標值。
　　Style：1或2或3
  q: X. `* h: H9 ~3 [- i　　StartX：任意值
9 o! L" n8 l+ u6 g　　StartY：任意值
+ R! E' o, L1 [1 p+ Q/ c/ t& j. s5 {　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

　　2、濾鏡：blur
& z* F  E. R& S7 C6 \: g　　語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
- I1 q& ]! l, c0 R　　說明：
" G5 e5 T1 D# C0 B$ k- h* G! q　　Add：一般為1，或0。
　　Direction：角度，0～315度，步長為45度。
　　Strength：效果增長的數值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")

) n/ s5 ]5 j  g7 V/ w  W" \　　3、濾鏡：Chroma
　　語法：STYLE="filter:Chroma(Color = color)"
　　說明：color：#rrggbb格式，任意。
2 y" s# q& ?9 T+ f0 Y1 f　　例子：filter:Chroma(Color="#FFFFFF")
$ H8 N' I) E: [, O" G$ n( a% P
　　4、濾鏡：DropShadow
　　語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
7 G" f' h3 x4 g: n# l8 b4 h　　說明：Color:#rrggbb格式，任意。
( x) \. s; [, j$ `　　Offx：X軸偏離值。
　　Offy：Y軸偏離值。
) M. O; Z7 O& Y' p6 H  c　　Positive：1或0。
5 a" n0 O: R! Y2 e# {7 Q　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
; S! o- b1 |8 L( `+ E1 D% s: @
　　5、濾鏡：FlipH
　　語法：STYLE="filter:FlipH"
　　例子：filter:FlipH
% O9 K6 O5 P( r% U9 O* J
4 O0 C0 E5 w* p　　6、濾鏡：FlipV
　　語法：STYLE="filter:FlipV"
. {% z8 h) w8 |3 A. m　　例子：filter:FlipV
# {* Z' _. F3 @, `$ g& s) ^- ~0 j
* s5 Y8 K% V) w( z9 \7 y# ?% Q; L　　7、濾鏡：glow
2 B8 h# {6 k! j' J　　語法：STYLE="filter:Glow(Color=color, Strength=strength)"
2 [+ o& k1 U! J; v/ z. C　　說明：
2 ]6 ^& J3 J. @% C( E　　Color：發光顏色。
) i& v& m, _$ A2 E　　Strength：強度(0－100)
" v: u1 n) v+ d　　例子：filter:Glow(Color="#6699CC",Strength="5")

$ [3 d, G- ^) o, T　　8、濾鏡：gray
% Z# k; W3 f. m( I3 W2 ^% Z/ F　　語法：STYLE="filter:Gray"
0 [  K' {, I7 n) |; d4 I' L2 U. p　　例子：filter:Gray

& p6 ?; }; [2 c- s　　9、濾鏡：invert
' I+ }5 @/ q$ Y- f　　語法：STYLE="filter:Invert"
+ x& c( s0 l0 V" f) U# g　　例子：filter:Invert
- k6 l0 F, {4 P1 \3 D, {
$ R9 {5 Y9 B+ z5 ~! H0 Y　　10、濾鏡：mask
　　語法：STYLE="filter:Mask(Color=color)"
　　例子：filter:Mask (Color="#FFFFE0")

% R. a( N5 p: z0 B; m$ @- }9 ^　　11、濾鏡：shadow
9 A6 T# Q9 w9 Z0 o& s# |, i! [　　語法：filter:Shadow(Color=color, Direction=direction)
  k2 l; K" _2 C( O6 }　　說明：
　　Color：#rrggbb格式。
# p: u& m  q% ~3 M/ y. H　　Direction：角度，0－315度，步長為45度。
　　例子：filter:Shadow (Color="#6699CC", Direction="135")
, \! e( }8 A2 n" Y+ o% Y
3 G8 W- w/ R# k5 Y7 n! w7 `; s　　12、濾鏡：wave
1 [/ _" K, W5 s, h% P　　語法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　說明：
- t( X$ X; ^. W$ J/ m! A8 n/ s　　Add：一般為1，或0。
　　Freq：變形值。
  V4 M6 ]# q' ~8 N　　LightStrength：變形百分比。
　　Phase：角度變形百分比。
　　Strength：變形強度。
　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
! D4 x' J( F/ k6 a6 A5 B. i
　　13、濾鏡：Xray
　　語法：STYLE="filter:Xray"
　　例子：filter:Xray
! u1 f# \3 K$ u# B
8 L! J' d9 }& X/ V! o; u
註：ZT！

7 j& K6 {+ Q. z  ~, Y. [! r[[i] 本帖最後由 wuhao 於 2006-7-30 11:01 編輯 [/i]]