CSS濾鏡參考(收集)& ~8 j: e( n7 I. L8 P T$ y4 H
3 C A! S- M. n* e7 g
語法:STYLE="filter:filtername(fparameter1, fparameter2...)" ' L! R' S* J8 l9 v, N0 U P. u
(Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數)
7 b6 F& i# m( f/ }9 m7 {6 bscript 語法:HTMLElement.filters.filterName.fParameter=value;
, N) \. j1 p1 Y) \+ i
% S# T" o& W/ ?- z) o; I 濾鏡說明:
* o. ~- s# ?5 S
. P2 @( }7 g/ ]8 l* a2 z G8 S7 l Alpha:設置透明層次 , A0 {0 G$ d8 w$ A' X g+ K
blur:創建高速度移動效果,即模糊效果 8 d) e* L; I# z! r" u+ T# Q
Chroma:製作專用顏色透明 - z1 _7 M' g$ f
DropShadow:創建對象的固定影子
! Q6 ^; [9 j2 \* \5 j( a3 b FlipH:創建水平鏡像圖片
: j! c: E+ l: J; @7 }$ ~9 z FlipV:創建垂直鏡像圖片
/ W* c( c7 X5 g0 R8 p glow:加光輝在附近對象的邊外
& A# ]3 z' k2 z+ c1 W8 u* N! M! W gray:把圖片灰度化 , N: q$ J5 \. H- F8 Y k2 S
invert:反色 ! x/ n: V% k: H9 N9 k
light:創建光源在對像上 2 j1 k8 v5 y O/ |1 a- E% V
mask:創建透明掩膜在對像上
4 Q/ m" O# f5 l) x. C W a shadow:創建偏移固定影子
: E+ Y. x; X* S2 L8 H wave:波紋效果
7 Y ?% l; v! @. s D Xray:使對像變得像被x光照射一樣
2 p) a. b# h8 x5 ~9 c
$ [$ u0 v% r5 l8 \8 S 1、濾鏡:Alpha ( z/ Q2 p9 w/ k( m& S
語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
% H& M9 p" o& b0 O7 v 說明:
: e. P N: U/ x! U0 I4 { Opacity:起始值,取值為0~100, 0為透明,100為原圖。 7 u1 i( ^: J& e* z
FinishOpacity:目標值。
# c1 i) `/ j% z+ R% m$ z+ I Style:1或2或3
+ c1 j0 i* F1 \1 m/ ` StartX:任意值 3 V4 n& K& ]& j4 r4 E8 Y" C6 ~
StartY:任意值 2 |% ]( `9 {7 w- @1 ^
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") & h w S+ J; L t V* m
3 Q+ q/ X# ?% L% E/ A6 X7 y
2、濾鏡:blur
. V6 y, M. {2 F! D* O! O9 f 語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
/ l, P" a3 Q# p0 b) T6 V' R 說明:
% [1 F P# d4 P+ X+ N& W( _/ i& b Add:一般為1,或0。
7 }4 G* B0 }; w3 ?& Z Direction:角度,0~315度,步長為45度。 7 z. d; \9 Q @5 o2 Z
Strength:效果增長的數值,一般5即可。 8 c! V( q7 e. E: i% q% a( `; C
例子:filter:Blur(Add="1",Direction="45",Strength="5")
; Q2 {) k a( @5 Q7 j" t/ x
+ h( k6 O+ Z) a0 j 3、濾鏡:Chroma
3 r3 n' R/ W$ N6 N* W6 t 語法:STYLE="filter:Chroma(Color = color)" . j( H- Y6 P) ?" O6 G9 M0 N
說明:color:#rrggbb格式,任意。 0 X1 W8 S; {) }6 ^6 ?+ H: ^) t
例子:filter:Chroma(Color="#FFFFFF") ) D2 N& f3 ^5 C+ {5 D
* R/ E$ z! D: B* q: w) |, O, Q, z 4、濾鏡:DropShadow * a E+ T# d. t6 ~, n0 @
語法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
# R2 Z- m% H: e5 Y5 y: K 說明:Color:#rrggbb格式,任意。
. y/ e, C6 I) `; i Offx:X軸偏離值。
& k: S& X3 g1 A8 ?* ^7 h# D+ e- m* { Offy:Y軸偏離值。
- C1 M6 R: k/ \# w% p! l( c Positive:1或0。
) ^8 d2 ~# ]) F5 M& k 例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
9 n0 U' v7 d* N( z+ t3 E
& b3 c3 z9 @- ]" @- |. v 5、濾鏡:FlipH ) H( {% u3 j! f' p S. ]( {% }
語法:STYLE="filter:FlipH" 6 |! Z: Q/ T- z* m
例子:filter:FlipH 7 a% Q4 E4 f# S7 M) t) |" m) M! z& ^
' W J. s, y5 O0 z; e8 D6 G& |
6、濾鏡:FlipV : W5 L/ w; x( Q# p1 c' j( K
語法:STYLE="filter:FlipV"
/ B# H$ H G5 k- y. M 例子:filter:FlipV
) L, K% D0 ~. j; R9 p* \& z" }) j% u* J# O( x
7、濾鏡:glow 8 T; i5 O! [( H) g9 C7 j' J! a
語法:STYLE="filter:Glow(Color=color, Strength=strength)"
3 y4 G" P, p6 Q7 t; f 說明:
`1 `' f1 Q2 l$ M Color:發光顏色。 6 I( X; G. p1 V% U
Strength:強度(0-100)
# i* }4 N6 B, k8 y 例子:filter:Glow(Color="#6699CC",Strength="5") : G% i3 ?2 }% T- a) g" j
) G. F2 ]1 h4 K/ F9 P 8、濾鏡:gray / S5 m/ m" {3 z& [: r. J
語法:STYLE="filter:Gray" . Y3 n3 @; \( B* j5 m1 N; }
例子:filter:Gray
. H' G9 e+ N7 y) h( m2 G( t0 b/ a% ~; w7 K
9、濾鏡:invert ' a; q! C+ K1 y$ W. I; W
語法:STYLE="filter:Invert" ; ~5 J+ b) D" Z d3 l7 o& ]
例子:filter:Invert
8 F+ e" \8 O& H, \( s' t8 z3 ^; j5 l* \% R
10、濾鏡:mask 3 \9 U/ k$ {- M
語法:STYLE="filter:Mask(Color=color)"
$ {8 s' s5 I8 I. d! g; j 例子:filter:Mask (Color="#FFFFE0")
" ~9 }) A' V7 c3 _
T# N' o6 B# P 11、濾鏡:shadow ) u: V: t3 f( T5 q Z: R
語法:filter:Shadow(Color=color, Direction=direction) 2 F* C9 m0 V/ a. l. j" \* R
說明: 7 {$ N# U1 X6 i. W9 }* C
Color:#rrggbb格式。 $ G9 V7 i% c, A3 ~9 H) f9 R$ g% g
Direction:角度,0-315度,步長為45度。 * ?# p# C9 j( D# L! {
例子:filter:Shadow (Color="#6699CC", Direction="135")
' T8 Y# o7 d0 m( j
/ H5 o" z& s( a/ {, V# f- F 12、濾鏡:wave 5 s3 D* T, {- C
語法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
, x) n. J$ h. L, I' ?9 j' w+ Z 說明: 4 n5 _8 ~' d3 }: k7 k
Add:一般為1,或0。
' K6 N6 {9 o- u3 D Q Freq:變形值。 1 W0 \' O( W5 c* X
LightStrength:變形百分比。
8 z( f2 ]6 a1 Y0 q Phase:角度變形百分比。
. L0 l- p: O* Q. A) { Strength:變形強度。
9 j8 b3 H; ~- c- n1 ^% j! F 例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2") 8 V* T* Y4 ?: J. x" H
: Z6 C( |2 X' f
13、濾鏡:Xray ; D/ |% m5 c& V. [4 I
語法:STYLE="filter:Xray" & D$ m" s' `4 E [8 u
例子:filter:Xray $ P2 O3 v& V5 [ ^
5 [- W' W$ a& [
6 Z: \( T: ]/ ?: `註:ZT!2 I# `! n3 P& g2 I$ y) o' V' }% [
, g3 X* e, K$ `, W- w7 z$ F! Z[[i] 本帖最後由 wuhao 於 2006-7-30 11:01 編輯 [/i]] |
|