CSS中的Filter样式特效详解
从IE 4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用图片，也可以使我们的文字，图片，按钮或是DIV标识鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。 下面，我们就来看看CSS的Filter样式。这里，即使你没有CSS这方面的知识，相信以下的内容也不会很难懂的。当然，首先，我默认你已经学过HTML，并且还能做网页，最好是还知道一点Scripts语句。由于各种浏览器对CSS的支持的原因，我建议你使用IE4.0以上版的浏览器，强烈建议你使用IE5.0版，这样，你就会毫不费力地看到所有的特效。
一、建立Filter样式
Filter既然是CSS样式表中的一员，那么它就可以像其它样式的定义和应用方式一样，可能直接定义在职HTML标识的<head>和</head>只间。其语法结构为：
filter：名称(参数及其值)
例如：imgblur { filter : Blur( strength=30 ) }
当然，它也可以通过Style标识定义在HTML的标识里面，如：
<Image ID=test SRC="test.gif" Style="Filter : Blur( Strength=30 )">
以上就是使用CSS中filter样式的使用方法，其实这和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种，上面的第一种是内部引用，第二种是局部引用，外部引用则要先建立一个CSS的文件，然后用<link rel=StyleSheet type="text/css" href="样式文件的URL">来嵌入HTML文件。有关CSS的定义方式，请大家参考网页陶吧里的相关文章。
Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果。例如：
…… ……
<img id=image1 src="test.jpg" border="0">
<img id=image2 src="test.jpg" border="0" style="filter : blur ( Strength=30 ) flipv()">
…… ……
在以上的例子中，ID为image1的图片是正常显示的图片，而ID为image2的图片则同时应用了模糊（Blur）和上下颠倒（Filpv）两种滤镜。以下是同一图片的两种效果：（得用IE4.0以上版的浏览器浏览）
怎么样，还行吧，这里要请大家注意几点:
1、如果使用多的滤镜，那么滤镜间要以空格分开。
例如：
<img src="test.jpg" style="Filter: alpha(opacity=30) Blur(amount=10)">
2、一个滤镜中的若干参数以逗号分隔。
例如：
<img src="test.jpg" style="filter : blur(amount=30,strength=50)">
3、Filter和其他的CSS样式则以分号分开。
例如：
<img src="test.jpg" style="filter: blur(amount=30) ; Position: relative">
接着，我们来看看Filter到底有哪些滤镜。
二、静态滤镜的种类
视觉效果的滤镜。在IE4.0以上版中，支持以下14种滤镜：
| 滤镜名 | 说明 |
|
Alpha |
让HTML元件呈现出透明的渐进效果 |
|
Blur |
让HTML元件产生风吹模糊的效果 |
|
Chroma |
让图像中的某一颜色变成透明色 |
|
DropShadow |
让HTML元件有一个下落式的阴影 |
|
FlipH |
让HTML元件水平翻转 |
|
FlipV |
让HTML元件垂直翻转 |
|
Glow |
在元件的周围产生光晕而模糊的效果 |
|
Gray |
把一个彩色的图片变成黑白色 |
|
Invert |
产生图片的照片底片的效果 |
|
Light |
在HTML元件上放置一个光影 |
|
Mask |
利用另一个HTML元件在另一个元件上产生图像的遮罩 |
|
Shadow |
产生一个比较立体的阴影 |
|
Wave |
让HTML元件产生水平或是垂直方向上的波浪变形 |
|
XRay |
产生HTML元件的轮廓，就像是照X光一样 |
这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。一般而言，用得最多的是图片和文字。那么，就让我们来看看各个滤镜中有些什么样的参数和效果。
三、Alpha 滤镜
|
参数名 |
说明 |
取值说明 |
|
Opacity |
不透明的程度，百分比。 | 从0到100，0表是完全透明，100表示完全不透明。 |
|
FinishOpacity |
这是一个同Opacity一起使用的选择性的参数，当同时Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。 | 从0到100，0表是完全透明，100表示完全不透明。 |
|
Style |
当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 | 0：没有渐进；1：直线渐进； 2：圆形渐进；3：矩形辐射。 |
|
StartX |
渐进开始的 X 坐标值 | |
|
StartY |
渐进开始的 Y 坐标值 | |
|
FinishX |
渐进结束的 X 坐标值 | |
|
FinishY |
渐进结束的 Y 坐标值 |
看一下下面的演示，你就知道了：
<table>
<tr>
<td>原图</td>
<td>Style=0</td>
<td>Style=1</td>
<td>Style=2</td>
<td>Style=3</td
<tr></tr>
<td><img src="test.jpg"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=0"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=1"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=2"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=3"></td>
</tr>
</table>
|
原图 |
style=0 |
style=1 |
style=2 |
style=3 |
 |
|
|
|
四、Blur 滤镜
在前面，你已经看过了Blur滤镜的效果了，感觉好吧？现在让我们来了解一下它的参数。
|
参数名 |
说明 |
取值说明 |
|
Add |
是否要在已经应用Blur滤镜上的HTML元件上显示原来的模糊方向 | 0表是不显示原对象； 非0表示要显示原对象。 |
|
Direction |
设置模糊的方向。 | 0（上），45（右上）， 90（右），135（右下）， 180（下），225（左下）， 270（左），315（左上）。 |
|
Strength |
指定模糊图像模糊的半径大小。单位是像素（pixels） | 默认值是5，取值范围为自然数。 |
让我们来看一个实例，
<DIV style="width:600;height:150;color:blue; filter:Blur(Direction=135, Strength=8)">Fileter样式模糊演示</DIV>
Fileter样式模糊演示
五、Chroma 滤镜
Chroma滤镜主要是把图片中的某个颜色变成透明的，使用了该滤镜，原图片中的一部分颜色就好像没有了一样。它只有一个参数——Color，用来指定透明的颜色，即不显示出来的颜色。
|
原图 |
隐藏红色（#FF0000） |
隐藏绿色（#00FF00） |
隐藏蓝色（#0000FF） |
 |
|
|
|
其原码如下：
<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#FF0000)">
<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#00FF00)">
<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#0000FF)">
六、Dropshadow 滤镜
Dropshadow 产生的效果是让HTML元件产生下落式的阴影，常用在文字或是图像上。以下是它的参数说明：
|
参数名 |
说明 |
取值说明 |
|
Color |
指定阴影的颜色 | #RRGGBB 格式的颜色值。 |
|
OffX |
指定阴影相对于元件对象在水平方向偏移量。 | 整数。正数表示阴影在对象的右方，负数表示阴影在对象的左方。 |
|
OffY |
指定阴影相对于元件对象在垂直方向偏移量。 | 整数。正数表示阴影在对象的上方，负数表示阴影在对象的下方。 |
|
Positive |
指定阴影的透明程度。 | 0表示透明，没有阴影效果； 非0表示显示阴影的效果。 |
再让我们来看个演示，
DropShadow 滤镜演示
源代码为：
<font color="#0000FF" face="楷体_GB2312"><strong>
<span style="font-size=36;FILTER:DropShadow(Color=#808080, OffX=5, OffY=5,
Positive=1);height:15" >DropShadow 滤镜演示</span></font>
七、FlipH 和 FlipV 滤镜
FlipH 和 FlipV 这两个滤镜主要是产生水平翻转和垂直翻转的效果，这两个滤镜没有额外的参数设置，直接使用就可以了。
例如：
| 原样 | FlipH 水平翻转 | FlipV 垂直翻转 | |
| 图片 |  |
|
|
| 文字 | 这是正常的文字 | 这是被水平翻转了的文字 | 这是被垂直翻转了的文字 |
原代码如下：
<img SRC="test.jpg" STYLE="Filter: FlipH()" width="100" height="50">
<img SRC="test.jpg" STYLE="Filter: FlipV()" width="100" height="50">
<span STYLE="Filter: FlipH();height=15">这是被水平翻转了的文字</span>
<span STYLE="Filter: FlipV();height=15">这是被垂直翻转了的文字</span>
八、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
