锐歌网络 网站运营 建站教程 购物指南 健康知识 绿色军营欢迎您访问锐歌网络 设为首页 | 加入收藏 | 联系站长 
锐歌网络
专注网络技术

您的位置:首页 » css » CSS滤镜-DropShadow属性
5、DropShadow属性

  DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影。看一看它的表达式:

  Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,
            Positive=positive)

  该属性一共有四个参数: Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数,代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。
  Positive参数有两个值:True为任何非透明像素建立可见的投影,False为透明的像素部分建立可见的投影。
  同样,我们先来看一个例子(见下图):

dropshadow属性效果

  看,图中的文字就像是从页面上飞出来一样,并且留下了一层淡淡的影子。
  实际上在这里应用的就是CSS的DropShadow属性,我们来看一下它的代码:

  <html>
   <head>
   <title>dropshadow </title>
   <style>
//*定义CSS样式*//
   <!--
   div {position:absolute;top:20;width:300;
   filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1);}
    -->

   //*定义DIV范围内的样式,绝对定位,投影的颜色为#FFCCFF,
    投影坐标为向右偏移15个像素,向下偏移10个像素*//

   </style>
   </head>
   <body>
   <div>
   <p style=“font-family:matisse itc;font-size:64;
        font-weight:bold;color:#CC00CC;”>

   //*定义字体名称、大小、粗细、颜色*//
   Love Leaf </p>
   </div>
   </body>
   </html>

  和chroma属性一样,Dropshadow属性对图象的支持不好,我指的是JPEG、GIF格式的图象文件。
  不能支持的原因与Chroma一样,因为这种图象的颜色很丰富,很难找到一个投射阴影的位置。

  本节讲述了Dropshadow属性的应用,下一节将向您介绍FlipH、FlipV的属性应用。

  • (分类:网络文章   关键词:健身知识,购物指南,建网站,域名注册,空间租用,企业邮箱,数据库租用,MSSQL数据库,MYSQL数据库,网站推广,网站运营)
  • 您已阅读:CSS滤镜-DropShadow属性 您还可以继续阅读↓  或 回到首页看看>>>
  • 上一篇CSS滤镜-Chroma属性

    4、Chroma属性   Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:   Filter:Chroma(color=color)   这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图:   图中显示两种字..

  • 下一篇CSS滤镜-FlipH、FlipV属性

    6、FlipH、FlipV属性   Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:   Filter:FlipH   Filter:FlipV   我们先来看一幅图:点击可放大   下面我们分别对它实现水平翻转和垂直翻转,并且在图片上..