代码的魔术——CSS滤镜之旅

代码的魔术——CSS滤镜之旅
2001.11.22 天极设计在线

　　编者的话：CSS 滤镜并不是一个新鲜的话题，况且它对浏览器还挺挑剔，但是谁也不能否认CSS 滤镜的确是一个很有趣的小东西，短短一行代码就可以变化出各种各样的滤镜特效。我们特意精心整理了这个专题，为了照顾使用低版本浏览器的朋友，我们同时使用CSS滤镜代码实现效果和效果拷屏记录以及代码显示三种方式向您详细讲述CSS 滤镜。

　　CSS滤镜实际上是CSS一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果您有一些脚本语言的基础，能够把滤镜效果与SCRIPT小程序做一些结合，就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。

　　请大家先看下面的例子，这里可没有用什么Photoshop之类的图象软件，只是用了一行短短的CSS滤镜代码，不信的话大家可以用右键看看它们的图片名字，都是相同的一张图片：

注：只有IE4.0/NC6.0以上的浏览器支持CSS滤镜效果，如果您的浏览器看不到上面的效果，请看下面的效果拷屏记录。（为了照顾使用低版本浏览器的朋友，我们将同时提供CSS滤镜代码实现效果和效果拷屏记录）

使用CSS滤镜的方法很简单，只要遵守下面的基本语法规则就行了：

filter:filtername(parameters)　即 filter:滤镜名称（参数）

下面我们将详细讲述每种滤镜的使用方法和精彩效果，大家还可以研究一下，将他们组合起来，得出各种曼妙的效果。

滤镜效果	功能描述
Alpha	设置不同的透明度变化效果
Blur	建立模糊效果
DropShadow	建立一种偏移的影象轮廓，即投射阴影
FlipH	水平翻转
FlipV	垂直翻转
Glow	为对象的边界增加色彩光效
Gray	将图片以灰度形式显示
Invert	将色彩、饱和度以及亮度值完全反转,类似底片效果
Light	在一个对象上进行灯光投影
Mask	为一个对象建立彩色透明遮罩
Shadow	为对象建立轮廓的影效果
Wave	在X轴和Y轴方向利用正弦波打乱图片
Xray	只显示对象的轮廓

具体的应用有两种方法：

1、 先定义好CSS ，再在页面中需要的对象上使用预先定义好的CSS，实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了，我们只需填上适合的具体参数即可：

　　2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

　　所谓的HTML控件元素就是它们在页面上定义了一个矩形空间，浏览器的窗口可以显示这些空间。下面列出HTML合法的控件，相信大家都熟悉它们的用法，在这里就不赘述了。细心的朋友可以看到我们文中所举的实例都是使用这种方法实现的。

BODY	BUTTON	DIV	IMG	INPUT	MARQUEE	SPAN
TABLE	TD	TEXTAREA	TFOOT	TH	THEAD	TR