当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS:Glow滤镜

CSS:Glow滤镜 (1)

来源：中国设计秀作者：点击：259 加入收藏

对一个对象使用“glow”滤镜后，这个对象的边缘就会产生类似发光的效果，这种效果在PHTOSHOP中做起来都比较麻烦，而在DW3中用CSS的“glow”滤镜来制作却是如此地简单，而且节约不少字节。

　　“glow”滤镜只有两个参数，一个是“color”是指定发光的颜色，可用十六进制的颜色代码来设定，如#FF0000（表示红色）；另一个参数是 “strength”则是表示发光的强度，可以从1到255之间的任何整数来指定这个发光强度，也可简单地理解为光芒的长度。下面我们来做几个应用实例。

一、发光的文字
　　请看下面的效果图：

　　图1　“glow”滤镜加载到文字上的效果

　　上面这种效果不错吧？！制作“glow”滤镜与其它CSS滤镜在方法上没有什么区别，故不再重复。“glow”滤镜可以直接加载到文字上，所以使用非常方便。上面这种效果的滤镜代码是：Glow1(Color=#0000FF, Strength=7)，你对“Color"和“Strength”设置不同的值，将得到不同的效果，你可以动手试试。

二、给图片加渐变外框
　　“glow”滤镜加载到一般图片无效，但若是把图片放到表格中，再给表格的< td >加上“glow”滤镜，却能使图片产生一个渐变颜色的边框，请看下面的效果：

　　图2　在< td >上加载“glow”滤镜的效果

　　这里使用的“glow”滤镜代码是：Glow1(Color=#0000FF, Strength=7)。但请你在具体制作时注意：为了加强效果，可以加上背景色，但你只能给表格加背景色，而一旦你给单元格加上背景色，“glow”滤镜就无效了。

三、为透明背景的图片增色
　　“glow”滤镜加载到一般图片上无效，但加载到有透明背景的gif图片上却能产生一种光晕效果，请看下面的效果图：

　　图3　“glow”滤镜加载到透明背景图片上的效果

　　在透明的gif 图片上可以直接加载“glow”滤镜，也就是用鼠标点击一下图片，然后，点击快速启动栏上的CSS图标，在对话框中选择一个“glow”滤镜即可。本例的“glow”滤镜代码是Glow1(Color=#CCFF99, Strength=7)。
　　“glow”滤镜的参数不多，使用也就比较简单，在具体应用时关键的问题是光芒颜色的选择，原则是与整个页面色彩要协调。我们再来看看在上例中再给< td >加载一个“glow”滤镜，代码为Glow2(Color=#0000FF,

顶一下

[1] [2]

2007-10-22 12:38:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1427.html

热点文章/相关文章