当前位置：首页> 正文

dreamweaver　CSS使用教程：扩展属性

扩　展　属　性　

【定义　CSS　样式扩展属性】“扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受　Internet　Explorer　4.0　和更高版本的支持。　

指定扩展属性：
在“CSS　样式定义”对话框中，选择“扩展”（如下图），然后设置所需的样式属性。

请注意：下列任意属性如果您认为不重要可以保留为空。　

分页：在打印期间在样式所控制的对象之前或者之后强行分页。选择要在弹出式菜单中设置的选项。此选项不受任何　4.0　版本浏览器的支持，但可能受未来的浏览器的支持。　

光标：位于“视觉效果”下的“光标”选项，是光标显示属性设置。当指针位于样式所控制的对象上时改变指针图像。选择弹出式菜单（右图）进行设置。　（左图）是它的详细列表和相关说明。

过滤器：又称　CSS滤镜，　对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。　从“过滤器”弹出式菜单中选择一种效果并视具体要求加以设置。各种　CSS　滤镜属性的详细介绍请从导航条选择“滤镜属性”按钮浏览。
滤　镜　概　述　　

过滤器：又称　CSS滤镜，　对样式所控制的对象应用特殊效果。它把我们带入绚丽多姿的世界。正是有了滤镜属性，页面才变得更加漂亮。DW　MX　2004　扩展类过滤器嵌入16项样式属性（如下图），您可以根据您的需要从“过滤器”弹出式菜单中选择并加以设置。　

下表列出16项滤镜及说明，现在再进一步介绍一下：

“Alpha”滤镜：这个名字，在Flash和Photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。

BlendTrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。

Blur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以把Blur滤镜加载到图片上，能达到用图象处理软件制作的效果。

“DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。

CSS的无参数滤镜共有六个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或图片翻转、获得图片的“底片”效果，甚至可以制作图片的“X光片”效果。

glow滤镜：使对象的边缘就产生类似发光的效果，glow”滤镜制作这种效果操作非常简便。

Mask滤镜：可以为网页上的元件对象作出一个矩形遮罩效果。

wave滤镜：它的作用是把对象按照垂直的波形样式扭曲的特殊效果。

Light滤镜：能产生一个模拟光源的效果，配合使用一些简单的Javascrpt，使对象产生奇特光照的效果。

RevealTrans动态滤镜：是一个神奇的滤镜，它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。
ALPHA　属性　

【Alpha滤镜属性】这个名字，在Flash和Photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。由于“Alpha”滤镜的参数多，我们先来看一下下边的表格：

“opacity”：代表透明度程度。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
“finishopacity”：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0　到　100。
“style”：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
“StartX”和“StartY”：代表渐变透明效果的开始X和Y坐标。
“FinishX”和“FinishY”：代表渐变透明效果结束X和Y坐标。　

请看下面的演示：

Alpha　属性值：　　
Alpha(Opacity=50,　FinishOpacity=100,　Style=0,　StartX=0,　StartY=0,　FinishX=100,　FinishY=100)
Alpha(Opacity=10,　FinishOpacity=100,　Style=1,　StartX=0,　StartY=0,　FinishX=100,　FinishY=100)
Alpha(Opacity=10,　FinishOpacity=100,　Style=2,　StartX=0,　StartY=0,　FinishX=100,　FinishY=100)
Alpha(Opacity=10,　FinishOpacity=100,　Style=3,　StartX=0,　StartY=0,　FinishX=100,　FinishY=100)

　　　　Style　加载在单元格<td>上显示效果如下图：

Style加载在图片上显示效果如下图：

Style加载在文字上显示效果如下图：

【BlendTrans属性】淡入淡出的效果滤镜，能产生极精细的图片转换效果。

制作说明：
BlendTrans滤镜功能也比较单一，只有一个参数：Duration（变换时间）。需要借助于Javas　cript来调用它的方法来实现转换功能。使用BlendTrans滤镜，首先您要准备几张宽高尺寸相同的图片，并分别命名，保存在图像目录下，如：images/*.webp。如果用4幅的话，分别取名为：blen1.webp；　blen2.webp；　blen3.webp；blen4.webp。（用其它名称也可以，但下边的javas　cript设置要相应调整。）
制作方法：
1、制作一个BlendTrans滤镜，取名为“myblen"，Duration设置为“3"（即转换时间为3秒），滤镜设置好后，在网页源代码的<　head　>与<　/head　>之间将有下面这样一段代码：

<　style　type="text/css"　>
<　!--
.myblen　{　filter:blendTrans(Duration=3)
}
--　>
<　/style　>　

　2、插入第一张图片（本例图片为570X150像素），在图片的属性面板上给图片加个名称：myimg
3、把BlendTrans滤镜加载到图片上，这时图片的“img"标记的代码是这样的：<img　src=http://www.ddvip.net/web/dw/index5/"images/blen1.webp"　name="myimg"　width="570"　height="150"　class="myblen"　id="myimg">；
4、在网页的源代码<　head　>与<　/head　>之间插入下面这段Javas　cript程序：