CSS濾鏡參考（收集）

CSS濾鏡參考（收集）

0 p3 u% N7 k" P8 s& _" @$ d0 ~9 e: S語法：STYLE="filter:filtername(fparameter1, fparameter2...)"
6 S7 q" c; y8 h　　（Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的參數）
script 語法：HTMLElement.filters.filterName.fParameter=value;

　　濾鏡說明：

　　Alpha：設置透明層次
/ \7 w& M. n- G  A! A　　blur：創建高速度移動效果，即模糊效果
　　Chroma：製作專用顏色透明
　　DropShadow：創建對象的固定影子
　　FlipH：創建水平鏡像圖片
* s) V4 v) P+ F" |; h0 w/ M0 F　　FlipV：創建垂直鏡像圖片
# J' L+ }, T: j2 T& B　　glow：加光輝在附近對象的邊外
7 y' ~, E* D6 b6 i, B6 I5 d　　gray：把圖片灰度化
　　invert：反色
, ~+ b' [/ @! |7 v+ t  D! N& T4 U6 T　　light：創建光源在對像上
6 X5 }$ S/ t: Q$ r$ O" P　　mask：創建透明掩膜在對像上
　　shadow：創建偏移固定影子
　　wave：波紋效果
　　Xray：使對像變得像被x光照射一樣

0 m& M' v" ?! v　　1、濾鏡：Alpha
　　語法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
1 ]0 e7 U) R& N  T% x　　說明：
! I! {( |  I5 [　　Opacity：起始值，取值為0～100, 0為透明，100為原圖。
　　FinishOpacity：目標值。
　　Style：1或2或3
. q5 z  o7 c, t1 W7 e/ M" i　　StartX：任意值
　　StartY：任意值
　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

　　2、濾鏡：blur
　　語法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
　　說明：
% {1 V. W# }5 R$ S　　Add：一般為1，或0。
　　Direction：角度，0～315度，步長為45度。
　　Strength：效果增長的數值，一般5即可。
2 j; J& z: j6 |' X0 t# e! ]% e$ a　　例子：filter:Blur(Add="1",Direction="45",Strength="5")
( K: l* ^4 I* k$ u" Q. _
9 z( N% L/ U  H　　3、濾鏡：Chroma
% ~- u/ }3 p( w- d　　語法：STYLE="filter:Chroma(Color = color)"
　　說明：color：#rrggbb格式，任意。
3 u8 a: w. x" B2 Z4 V　　例子：filter:Chroma(Color="#FFFFFF")

2 S: C. ~- d: Q1 u$ f5 ~　　4、濾鏡：DropShadow
　　語法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
　　說明：Color:#rrggbb格式，任意。
　　Offx：X軸偏離值。
& M+ j4 h6 t& ?$ K* w5 t　　Offy：Y軸偏離值。
　　Positive：1或0。
　　例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

0 d( {5 j6 J. a' @0 f. P3 C6 U; D　　5、濾鏡：FlipH
$ n$ y, u5 F" h" Q5 ^- b7 c! L7 V　　語法：STYLE="filter:FlipH"
　　例子：filter:FlipH
1 |& M* v& r0 b3 ~2 L/ a% o
　　6、濾鏡：FlipV
% k( N3 d+ k4 f  P& G+ i　　語法：STYLE="filter:FlipV"
　　例子：filter:FlipV
+ H2 x0 v8 v# |% t2 \0 n: n2 D# Z
- x% W8 F& c4 I4 Q& m  a　　7、濾鏡：glow
　　語法：STYLE="filter:Glow(Color=color, Strength=strength)"
　　說明：
0 Z+ i- Q  n$ P: ^　　Color：發光顏色。
　　Strength：強度(0－100)
! `! F5 r; }) B+ g　　例子：filter:Glow(Color="#6699CC",Strength="5")

, X! N) D5 d9 b　　8、濾鏡：gray
　　語法：STYLE="filter:Gray"
　　例子：filter:Gray
1 v& f6 r! X0 a- y2 P5 Q$ f: |1 ~
　　9、濾鏡：invert
; D! `! M8 d; [; i. D3 j9 @4 h' _　　語法：STYLE="filter:Invert"
　　例子：filter:Invert

; ^3 U8 t3 P) x- E+ R　　10、濾鏡：mask
7 {+ O0 C" G# p2 C1 c3 j, P7 E　　語法：STYLE="filter:Mask(Color=color)"
  w) g, s% ]! q! ~　　例子：filter:Mask (Color="#FFFFE0")

8 |  s  k5 |. d; }0 `$ U7 H, g* Z　　11、濾鏡：shadow
8 {3 ^5 t* V# a- m3 D　　語法：filter:Shadow(Color=color, Direction=direction)
　　說明：
　　Color：#rrggbb格式。
7 O6 o, u3 ?- P' ~! @　　Direction：角度，0－315度，步長為45度。
7 i! n5 k2 ^1 {3 h. Q　　例子：filter:Shadow (Color="#6699CC", Direction="135")
. ]- V- w- @8 _
8 K0 t5 @% h. V! M5 ^( _5 \　　12、濾鏡：wave
　　語法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
4 R) c5 n7 c& y' U　　說明：
　　Add：一般為1，或0。
　　Freq：變形值。
. T- G+ @" ^( Y2 Z! Z+ W6 b　　LightStrength：變形百分比。
　　Phase：角度變形百分比。
  ^) t4 N4 G6 }0 a　　Strength：變形強度。
  }" m' F; x* N5 K$ i　　例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

　　13、濾鏡：Xray
　　語法：STYLE="filter:Xray"
$ \7 f0 S! ^: Q" a) L　　例子：filter:Xray

; t8 r9 F4 e) F
7 K, x! S  I8 ^" s. Y/ [' ^3 B註：ZT！

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