DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影。看一看它的表达式:
% Z% k" {0 [. E/ B9 D7 _* A& U. C' q0 Y1 I$ m
Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,
# r, M& W4 I/ X* I2 H( U
Positive=positive)
0 q: v/ ~) G Q1 V% |; d& y3 `
1 [* r1 ]1 C4 i0 V( q 该属性一共有四个参数: Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数,代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
% N9 W3 N# r# s Positive参数有两个值:True为任何非透明像素建立可见的投影,False为透明的像素部分建立可见的投影。
( Q! D" \, M8 z- u
同样,我们先来看一个例子(见下图):
9 l9 ]& R- j- T5 G
3 H+ H% l7 o8 b6 e8 S. c3 F' P1 F, J, U+ {
$ {8 B2 t3 }' R2 l6 l- \1 K
) P5 S, N6 M( D% F/ k4 H% d7 g
- [; l/ h- }: }9 ^( e# s 看,图中的文字就像是从页面上飞出来一样,并且留下了一层淡淡的影子。
8 X5 t* G' x( r1 b 实际上在这里应用的就是CSS的DropShadow属性,我们来看一下它的代码:
2 \3 L! S; v2 y7 z/ B- m7 _; L# C" k4 q; l9 M {) \! f; a1 H
html
9 \# A' g7 P3 K head
0 o( D: e4 \, E titledropshadow /title
5 a |. K- a! | c& z
style//*定义CSS样式*//
" I; S" N' V0 I9 I
!--
1 }( k% |3 S- i% c: L div {position:absolute;top:20;width:300;
/ s3 U3 L$ g: Q1 E1 v: u { filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1);}
% a. @8 [5 I. e: d6 N- G* ?8 E3 a --
4 n. ?+ n# M1 c1 o% e* k //*定义DIV范围内的样式,绝对定位,投影的颜色为#FFCCFF,
$ i' C: Y$ V' T0 }# @$ U2 d 投影坐标为向右偏移15个像素,向下偏移10个像素*//
2 d1 `- ~( h0 G/ O
/style
, p7 l: J. X& V* W, Q
/head
3 B, z: b* g4 q body
- x8 ~+ ^5 L. G! V; g# P" c div
$ Q! D1 [# u& g$ v1 p. f- g$ S: w5 I p style=“font-family:matisse itc;font-size:64;
% }2 h9 e' c9 p( y5 `) O0 q
font-weight:bold;color:#CC00CC;”
5 D! ?3 p9 I/ N8 }3 b& c& l4 [8 z //*定义字体名称、大小、粗细、颜色*//
0 b: [# p" x: l& a
Love Leaf /p
! K! K, b- \& n1 ^- z1 N5 F# e) @
/div
' Q0 r4 }5 K, v9 Q7 e t) J/ Y: t /body
5 P" X% V/ A! `( U, b" |
/html
w. c$ s% u' ^% {0 n
* o9 l8 D" i9 a2 \/ h$ e* g 和chroma属性一样,Dropshadow属性对图象的支持不好,我指的是JPEG、GIF格式的图象文件。
5 V7 M, `# e$ Q
不能支持的原因与Chroma一样,因为这种图象的颜色很丰富,很难找到一个投射阴影的位置。