dreamweaver CSS使用教程:DROPSHADOW属性

dreamweaver CSS使用教程:DROPSHADOW属性

 

【DropShadow属性】作用是添加对象的阴影效果。实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色。下面我们看一下使用该滤镜来做的带阴影的文字效果: 

带阴影的文字 

    制作方法如下:
创建新的CSS样式:(要回顾创建新的 CSS 样式操作方法,请点页顶导航条“简要说明”按钮)

    提示:新创建的CSS样式名称,输入“Drop”。勾选“仅对该文档”。保存后,在分类选项选择“扩展”,再设置“过滤器”。
选择“DropShadow"并按括号中的参数值设置(DropShadow(Color=#FF0000, OffX=5, OffY=5, Positive=1)),按“确定”结束。 若是操作无误的话,在你网页代码的< head >与< /head >之间,会有如下所示的代码:

<style type="text/css">
<!--
.Drop {
filter: DropShadow(Color=#999999, OffX=5, OffY=5, Positive=true);
}
-->
</style> 

 

 Dropshadow滤镜有四个参数,它们的含义为:
“Color”:代表投射阴影的颜色。
“offx”和“offy”:分别是X方向和Y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;
“Positive”参数:如果为“true(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“fasle(0)”,那么就为透明的像素部分建立透明效果。

 

   对文字加载Dropshadow滤镜比较方便的办法,是把Dropshadow滤镜加载到文字所在的表格单元格< td >上。文字比较小时,使用Dropshadow的效果不太理想,所以一般用于制作稍大的标题字。

 

   Dropshadow滤镜对一般图片无效,但我们把图片放到表格中,再给表格的<td>加载Dropshadow滤镜,将会产生一种图片有了立体边框的效果,如下图所示:

注:该效果所使用的Dropshadow滤镜参数和上边字体的参数一致。 

 

推荐阅读

    Dreamweaver概述:插入表单对象

    Dreamweaver概述:插入表单对象,对象,表单,设置,属性,注册,标签,文本, Dreamweaver概述:插入表单对象 插入表单对象  一.重点掌握: 表单中

    Dreamweaver CC教程:插入对象

    Dreamweaver CC教程:插入对象,对象,教程,标签,编辑器,视图,文档,选择,Dreamweaver CC教程:插入对象 插入对象 使用&ldquo;插

    Dreamweaver教程:CSS滤镜

    Dreamweaver教程:CSS滤镜,滤镜,对象,参数,教程,语法,透明,设置,Dreamweaver教程:CSS滤镜 在可视化界面可以方便的设置CSS滤镜。

    Dreamweaver表单对象:文本区域

    Dreamweaver表单对象:文本区域,文本,区域,表单,对象,字符,设置,显示,Dreamweaver表单对象:文本区域 文本区域 在表单中插入一个文本区

    dreamweaver CSS使用教程:区块属性

    dreamweaver CSS使用教程:区块属性,属性,设置,文本,使用教程,显示,对齐,支持,dreamweaver CSS使用教程:区块属性 区 块 属 性 【定义

    dreamweaver CSS使用教程:定位属性

    dreamweaver CSS使用教程:定位属性,定位,属性,设置,显示,使用教程,滚动条,浏览器,dreamweaver CSS使用教程:定位属性 定 位 属 性  【

    dreamweaver CSS使用教程:GLOW属性

    dreamweaver CSS使用教程:GLOW属性,属性,使用教程,参数,选择,滤镜,对象,无效,dreamweaver CSS使用教程:GLOW属性 【glow属性】对象应用gl

    dreamweaver CSS使用教程:扩展属性

    dreamweaver CSS使用教程:扩展属性,扩展,属性,对象,滤镜,使用教程,设置,控制,dreamweaver CSS使用教程:扩展属性 扩 展 属 性  【定义

    Fireworks教程:对象的操作

    Fireworks教程:对象的操作,对象,路径,选择,填充,教程,操作,滑块,Fireworks教程:对象的操作 对象的选择:用“指针” 工具可以对绘图对象进行

    Fireworks教程:对象相互结合

    Fireworks教程:对象相互结合,对象,命令,图形,教程,路径,接合,组合,Fireworks教程:对象相互结合 组合与取消:使用菜单栏上的“修改—组合”