深港DJ音乐社区 » 网站建站教程 » 其他教程 » Shadow属性  CSS滤镜
深港DJ音乐论坛诚招版主 您可以由以下地址进入我们的摇头世界
深港DJ俱乐部 深港DJ摇头网
深港音乐社区QQ群:24863889
本页主题: Shadow属性  CSS滤镜 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

逍遥浪子
(紫晶之约) 原创先锋奖 (青涩光华) 特殊贡献奖
该用户目前不在线
级别: 管理员
精华: 5
发帖: 464
威望: 737 点
深港币: 398324
贡献值: 0 点
好评度: 404 点
朋友圈: 深港DJ炫舞研究协会
在线时间:343(小时)
注册时间:2007-02-19
最后登录:2008-12-02

Shadow属性  CSS滤镜

11、Shadow属性   Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的:
  Filter:Shadow(Color=color,Direction=direction)
  在这里,Shadow有两个参数值:Color参数用来指定投影的颜色;Direction参数用来指定投影的方向。
  这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。   也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗?
  光说的话,您恐怕还难以理解,让我们看一看分别利用这两个属性做出来的效果有什么不同(见下图):
 
         Shadow效果        Dropshadow效果
  这样一对比,就可以很明显的看出两者的不同。
  Shadow属性可以在任意角度进行投射阴影,Dropshadow属性实际上是用偏移来定义阴影的。所以,看上去左图的文字和阴影就像是一体的,而右图的文字就像脱离了阴影一样。
  本例的代码如下:
  <html>
   <head>
   <title> shadow</title>
   <style>
//*开始设置CSS样式*//
   <!--
   .shadow{position:absolute;top:20;width:300;
       filter:shadow(color=#cc66ff,direction=225);}

   //*定义Shadow类的样式,绝对定位,Shadow属性,阴影颜色、投影方向*//
    .dropshadow{position:absolute;top:180;width:300;
    filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1);}

   //*设置Dropshadow类的样式,样式与Shadow类相似, 不同的是滤镜用了
   Dropshadow属性,设置X轴和Y轴的偏移量*//

   -->
   </style>
   </head>
   <body>
   <div class=“shadow”>
//*区域内为Shadow类*//
   <p style=“font-family:bailey;font-size:48pt;
        font-weight:bold;color:#FF9900;”>
    Hongen Online</p>
//*定义字体名称、大小、粗细、前景色*//
   </div>
   <div class=“dropshadow”>
//*区域内为Dropshadow类*//
   <p style=“font-family:bailey;font-size:48pt;
         font-weight:bold;color:#FF9900;”>
    Hongen Online</p>
//*定义字体样式与Shadow类的一样*//
   </div>
   </body>
  </html>

  本节讲述了Shadow属性的应用,下一节将向您介绍Wave(波纹)属性。
顶端 Posted: 2007-03-30 23:25 | [楼 主]
深港DJ音乐社区 » 其他教程

Total 0.058526(s) query 5, phpwindTime now is:12-04 08:12, Gzip enabled 粤ICP备06068709号
Powered by 深港DJ论坛 ik123.comCode © 2003-07 Corporation