CSS利器-CSS滤镜效果介绍

CSS滤镜在应用中运用的不是特别的普遍,但是如果能够恰当的使用CSS滤镜,一定能获得意想不到的效果。通过使用滤镜可以实现类似PHOTPSHOP的效果,并且可以大大减少网页的大小。让我们一起看看都有哪些滤镜吧

Alpha滤镜 听到这个名字，你可能会想到Flash里有，Photoshop里也似乎见过。一点不错，它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度

Blur滤镜是CSS的滤镜之一，把它加载到文字上，可产生立体字的效果，这将为你在网页上使用立体字做标题带来了极大的方便，也为你的网页减轻了分量；把Blur滤镜加载到图片上，能使你的图片增色不少，虽然用图象处理软件也能达到同样效果，但用Blur滤镜可方便多了

DropShadow滤镜顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量，然后加上颜色

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

Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩?如果你用过Flash中的遮罩，你就会知道了，就是那个样子了。实际上对于遮罩你也可以这样来理解，相当于用一块有色布把物件盖起来，但内容却被挖去了

wave滤镜 看它的名称你可能就能想到其效果，正如你想的那样，它的作用是把对象按照垂直的波形样式扭曲，从而产生一种特殊的效果

Light滤镜 能产生一个模拟光源的效果，但使用它要通过调用它的“方法（Method）”来实现，这就要用到一些Javascrpt知识，虽然有一点难度，但产生的效果也是奇特的

RevealTrans动态滤镜 是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了

BlendTrans滤镜 比起上一篇介绍的Revealtrans滤镜来要简单一些，它只有一个参数：Duration 变换时间，它的功能也比较单一，就是产生一种淡入淡出的效果，不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多

CSS的无参数滤镜 共有六个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或图片“翻翻身”、获得图片的“底片”效果，甚至可以制作图片的“X光片”效果

掌握好以上一些滤镜的使用,在网页设计和网页优化中一定能如虎添翼!