发新话题
打印

CSS滤镜之DropShadow属性

CSS滤镜之DropShadow属性


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一样,因为这种图象的颜色很丰富,很难找到一个投射阴影的位置。



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题