学用CSS的滤镜功能

朱宝贵 · 2001年第37期

在主页制作时采用CSS（样式表）技术，可以有效地对页面的布局，字体，颜色，背景等实现更加精确的控制。大多数人对这些CSS的一般用途很是熟悉，但你知道吗？CSS里面竟然还有像Photoshop一样的滤镜功能。
　　 下面就让我们来看看由CSS滤镜制作的两个例子，感受一下它的神奇之处。
　　 图1（（图1））中所示的效果是由CSS中的Blur滤镜（产生运动模糊效果）制作的，而图2（（图2））效果则是用DropShadow滤镜（产生对象的投影）制作的。很酷吧！是不是很像使用Photoshop里的滤镜制作过一样。来看一下两个页面的源代码，CSS的滤镜功能是如何实现的：

图1
图1
图2
图2

　　#1 1.Blur滤镜代码分析
　　
　　
　　 Blur滤镜效果
　　
　　

　　

　　

Blur 滤镜效果
　　


　　 Blur 滤镜效果
　　

　　
　　
　　 注解：
　　 Blur滤镜的基本格式为：Blur（Direction=value，Strength=value）
　　 Direction参数：表示设定字体模糊的方向，0为上，45为右上，90为右，135为右下，180为下，225为左下，270为左，315为左下。
　　 Strength参数：表示指定字体模糊图像模糊的范围，单位是像素（pixels）。
　　#1 2.DropShadow滤镜代码分析
　　
　　
　　 DropShadow滤镜效果
　　
　　

　　
　　

DropShadow 滤镜效果