CSS中的Filter样式特效3

八、Glow 滤镜

　　Glow 效果可以让HTML元件对象的轮廓上产生一种比较柔和的边框，可以说是个晕，并且还有点像火一样有淡化的效果。下表是它的参数：

参数名	说明	取值说明
Color	指定晕开阴影的颜色	#RRGGBB 格式的颜色值。
Strength	指定晕开阴影的范围。	设定值从1到255，数字越大晕得就越强，数字越小则反之。

示例：

<h2 style="height:150;FILTER: Glow(Color=#FF0000,Strength=5)" lign="center">
这是利用 Glow 滤镜做的一个火焰字的效果，是不是很 Cool ?
</h2>

<div style="position:relative; left:200; height:100;width:150; FILTER: Glow(Color=#FF0000,
Strength=10)"align="center">
<img SRC="test.jpg" width="100" height="50">
</div>

效果如下所示：

这是利用 Glow 滤镜做的一个火焰字的效果，是不是很 Cool ?

如果那个图片是透明的GIF图片，就更会有意想不到的效果了。不信？你可以自己试试！

九、Gray 滤镜

　　这个滤镜主要是把一个彩色图片变成黑白的，就像黑白照片一样，这个滤镜也是没有参数，直接使用就可以了。例如：

<img src="test1.gif" width="100" height="50" style="filter:gray()">

　　可以看出，上面两幅图片中左边的是原样的，而右边的则是被 Gray 了的。并且，我们可以看出红颜色和绿颜色的灰度是一样的，这就是红绿色盲的产生的原因了。

十、Invert 滤镜

　　该滤镜是反转图片中颜色的色调、饱和度、亮度，这就好像我们看见的照片的底片一样。就是那种效果。例如：

<img SRC="photo.jpg" style="filter:invert()" width="225" height="180">

　　怎么样？使用了这个滤镜后，就是右边的这个样子了。对了，这个滤镜没有参数，差点忘说了。

十一、Mask 滤镜

　　这个滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩我也不是说得太清楚，如果你用过Flash中的遮罩，你就会知道了，就是那个样子了，我说不出来。

来看一下它的参数：

参数名	说明	取值说明
Color	遮罩的颜色	#RRGGBB 格式的颜色值。

示例：

<h1 style="filter:mask(color=blue);height=1">这是一段被颜色为遮罩色的文字。</h1>

这是一段以蓝颜色为遮罩色的文字。

这是一段以白颜色为遮罩色的文字。

　　在上面的效果中，我故意用了一幅红绿蓝的图片做背景，这样你就更容易知道什么是遮罩了，可见，我以蓝色做为遮罩色，当字在背景为蓝色的地方就不见了，而如果我以白色做为遮罩色的话，你会看见一个五彩缤纷的字，就好像一个被挖空的字。

十二、Shadow 滤镜

　　Shadow滤镜其实和 DropShadow 很相像，也是给被作用的HTML元件对象产生下落式的阴影效果。但是，两者所不同的是，DropShadow 没有渐进感，而Shadow则有渐进阴影感，看起来就更真实一些。我们可以先看一下它的效果：

Shadow 滤镜展示

　　感觉如何？是不是很有立体感，这就是Shadow滤镜，好了，让我们来看看它的参数：

参数名	说明	取值说明
Color	阴影的颜色	#RRGGBB 格式的颜色值。
Direction	设置模糊的方向。	0（上），45（右上）， 90（右），135（右下）， 180（下），225（左下）， 270（左），315（左上）。

　　刚才上面那个效果的代码是：

<h2 Style="FILTER:Shadow(Color=#808080, Direction=135);height=30" align="center">
<font face="楷体_GB2312" color="#0000FF">Shadow 滤镜展示</font></h2>

　　你可以试试把这个效果作用在一幅图片上，要是有一幅透明的GIF图片就更酷了。试试吧！

十三、Wave 滤镜

　　顾名思义，Wave滤镱可以让HTML元件对象在垂直方向上产生波浪的变形。以下是它的参数：

参数名	说明	取值说明
Add	表示是否在已经使用了Wave滤镜的元件对象上显示原对象。	0表示不显示； 非0表示要显示原对象。
Freq	设置波动的个数。	自然数。
LightStrength	设置波浪效果的光照强度。	从0到100。0表示最弱，100表示最强。
Phase	波浪的起始相角。	从0到100的百分数值。例如：25相当于90度，而50则相当于180度。
Strength	设置波浪摇摆的幅度。	自然数。

　　这里要注意的是Phase参数，它是以正弦波的波形当做初始波形，当设置了相角后，也就是把一个正弦波向左移一段距离。什么是相角呢？这是在高中的数学课里就已经讲过了哦！在这里我就不多说了。

　　好了，让我们来看一下该滤镜的示例：

你看到波浪文字了吗?是不是比较不错？

以下是上面效果的代码：

<img SRC="photo.jpg"
style="filter:wave(strength=12, freq=8,lightstrength=10, add=0, phase=0)"> </p>

<h1 style="filter:wave(strength=5, freq=2, lightstrength=30, add=0, phase=90);height=1"
align="center"><font face="楷体_GB2312" color="#FF0000">你看到波浪文字了吗?是不是比较不错？</font></h1>

　　我们看见那个图片的波浪不是很好看，最好用一幅透明的GIF图片，一定会有更好的效果的。

 

文章来源：http://blog.csdn.net/chenupc/archive/2006/11/21/1402537.aspx