CSS濾鏡參考（收集）

CSS濾鏡參考（收集）

語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
5 z- s$ ~) U- m6 m" b. t# n. n　　（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
script 語法：HTMLElement.filters.filterName.fParameter=value;

　　濾鏡說明：
! N2 a1 o* T! [4 @# L
8 t; o* I, e6 i* Y( u　　Alpha：設置透明層次
6 I0 b3 G! ?" i( u　　blur：創建高速度移動效果，即模糊效果
　　Chroma：製作專用顏色透明
　　DropShadow：創建對象的固定影子
0 U. V! o; l& C) P( c% l　　FlipH：創建水平鏡像圖片
' H9 c: }( P; B, _/ z　　FlipV：創建垂直鏡像圖片
! ?! m0 K6 w& r' }　　glow：加光輝在附近對象的邊外
- h% _4 O, T% q% Y4 K　　gray：把圖片灰度化
　　invert：反色
　　light：創建光源在對像上
/ A9 {: g' H$ g7 k: W% y6 X　　mask：創建透明掩膜在對像上
: D  w4 U  A$ N5 v( y; t, `6 A　　shadow：創建偏移固定影子
4 E7 V* y# ^7 p% {! p5 P- y1 Q　　wave：波紋效果
　　Xray：使對像變得像被x光照射一樣

　　1、濾鏡：Alpha
3 l$ r+ G+ p* M　　語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
4 D7 O9 B" K- q& D　　說明：
' K! i( X' n: r2 v/ P4 O2 V　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。
　　FinishOpacity：目標值。
; `5 b9 U% k! c- y# A; w　　Style：1或2或3
! |" j) F- y8 K4 w0 z　　StartX：任意值
2 {8 J5 O4 V1 }& \8 R　　StartY：任意值
, D5 Q# o" H' x$ v　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
' U) Z* m& X! D( M$ x. j
# `; G1 K9 q4 q. e) C　　2、濾鏡：blur
# R7 H' ?1 E" A# t" }　　語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
4 Q4 [7 ?2 f3 M1 [! k　　說明：
　　Add：一般為1，或0。
7 o" y( l" `# U9 m( c( T　　Direction：角度，0～315度，步長為45度。
# [. w' X( g3 {1 ?; o4 m* u) |　　Strength：效果增長的數值，一般5即可。
　　例子：filter:Blur(Add="1",Direction="45",Strength="5")

　　3、濾鏡：Chroma
( }' ~% \1 B+ }: i1 l+ b( ^$ e　　語法：STYLE="filter:Chroma(Color = color)"
7 ?! o* C$ V) W- K% l　　說明：color：#rrggbb格式，任意。
! `  Y0 b% d9 a8 w) E; s　　例子：filter:Chroma(Color="#FFFFFF")

; T7 w/ _  o4 l1 X8 x; F　　4、濾鏡：DropShadow
　　語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
+ A! m2 u/ m, i　　說明：Color:#rrggbb格式，任意。
　　Offx：X軸偏離值。
1 ~# p; T$ A' ?7 C/ i9 @+ W　　Offy：Y軸偏離值。
　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

　　5、濾鏡：FlipH
' z9 t5 Z6 D) C  ^( D4 h# K　　語法：STYLE="filter:FlipH"
　　例子：filter:FlipH

( L4 O$ Y7 u+ g$ p; |　　6、濾鏡：FlipV
　　語法：STYLE="filter:FlipV"
　　例子：filter:FlipV
# H9 K( Y! L" E3 O& H6 }  Z
+ G) s. A  D: e7 O　　7、濾鏡：glow
　　語法：STYLE="filter:Glow(Color=color, Strength=strength)"
, s2 E8 b  W2 w. B6 b, ]　　說明：
& g2 }; ?4 g6 u- G+ `  x7 ~' N　　Color：發光顏色。
4 W, {/ J; D' }/ I6 N- c　　Strength：強度(0－100)
/ L  y' z- d# B2 g, J( D0 N. o　　例子：filter:Glow(Color="#6699CC",Strength="5")

8 S8 A) D7 ^. m　　8、濾鏡：gray
　　語法：STYLE="filter:Gray"
4 Y& k5 X) i  o/ X& P8 R- e3 S. N/ S　　例子：filter:Gray

3 G4 V) ]  ]6 L9 F. d  t" [. Z　　9、濾鏡：invert
　　語法：STYLE="filter:Invert"
! a7 o1 @4 k: v1 m' z　　例子：filter:Invert
$ I/ F  ~+ {3 y2 ^: A$ j
% \. e0 x4 Y' l0 {+ Z/ q( Z　　10、濾鏡：mask
- z% f* ?2 t# i) A　　語法：STYLE="filter:Mask(Color=color)"
　　例子：filter:Mask (Color="#FFFFE0")
' r& Z$ x. R0 e
8 H8 v8 F/ G$ b- L# l  E4 M　　11、濾鏡：shadow
; l% J" j$ U% ]. [3 m　　語法：filter:Shadow(Color=color, Direction=direction)
　　說明：
　　Color：#rrggbb格式。
7 R" p8 d) m/ C4 o　　Direction：角度，0－315度，步長為45度。
　　例子：filter:Shadow (Color="#6699CC", Direction="135")

　　12、濾鏡：wave
　　語法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
　　說明：
/ N8 ~& k3 w& L9 }　　Add：一般為1，或0。
* H7 r, Q2 ?" M+ j9 f2 m　　Freq：變形值。
& `% }, K" ^  w9 M- d; M5 c2 E　　LightStrength：變形百分比。
* s! f! r- L0 n  |. Q% V　　Phase：角度變形百分比。
: a, o" k! E+ A/ J' E: `& X　　Strength：變形強度。
, J4 N9 a: E9 w　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、濾鏡：Xray
　　語法：STYLE="filter:Xray"
　　例子：filter:Xray
8 c; K6 N+ v+ `

" p& I2 h$ U' g2 M# u' W( L( O, p& }註：ZT！

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