CSS中的Filter样式特效详解

CSS中的Filter样式特效详解(1)一、建立Filter样式　　Filter既然是CSS样式表中的一员，那么它就可以像其它样式的定义和应用方式一样，可能直接定义在职HTML标识的和只间。其语法结构为：filter：名称(参数及其值)　例如：imgblur { filter : Blur( strength=30 ) }　当然，它也可以通过Style标识定义在HTML的标识里面，如：　　以上就是使用CSS中filter样式的使用方法，其实这和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种，上面的第一种是内部引用，第二种是局部引用，外部引用则要先建立一个CSS的文件，然后用来嵌入HTML文件。有关CSS的定义方式，请大家参考网页陶吧里的相关文章。　　Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果。例如：…… ……　　　　　　　　　　　　…… ……　　在以上的例子中，ID为image1的图片是正常显示的图片，而ID为image2的图片则同时应用了模糊（Blur）和上下颠倒（Filpv）两种滤镜。以下是同一图片的两种效果：（得用IE4.0以上版的浏览器浏览）　　怎么样，还行吧，这里要请大家注意几点:　　1、如果使用多的滤镜，那么滤镜间要以空格分开。例如：　　2、一个滤镜中的若干参数以逗号分隔。例如：　　3、Filter和其他的CSS样式则以分号分开。例如：　　接着，我们来看看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 坐标值　　看一下下面的演示，你就知道了：　　　　　　　　　　　　原图　　　　Style=0　　　　Style=1　　　　Style=2　　　　Style=3</td 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　原图 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，取值范围为自然数。　　让我们来看一个实例，

Fileter样式模糊演示

Fileter样式模糊演示五、Chroma 滤镜　　Chroma滤镜主要是把图片中的某个颜色变成透明的，使用了该滤镜，原图片中的一部分颜色就好像没有了一样。它只有一个参数——Color，用来指定透明的颜色，即不显示出来的颜色。原图 隐藏红色（#FF0000） 隐藏绿色（#00FF00） 隐藏蓝色（#0000FF） 　　其原码如下：CSS中的Filter样式特效详解(2)　　六、Dropshadow 滤镜　　Dropshadow 产生的效果是让HTML元件产生下落式的阴影，常用在文字或是图像上。以下是它的参数说明：参数名 说明 取值说明 Color 指定阴影的颜色 #RRGGBB 格式的颜色值。 OffX 指定阴影相对于元件对象在水平方向偏移量。 整数。正数表示阴影在对象的右方，负数表示阴影在对象的左方。 OffY 指定阴影相对于元件对象在垂直方向偏移量。 整数。正数表示阴影在对象的上方，负数表示阴影在对象的下方。 Positive 指定阴影的透明程度。 0表示透明，没有阴影效果；非0表示显示阴影的效果。　　再让我们来看个演示，DropShadow 滤镜演示源代码为：DropShadow 滤镜演示七、FlipH 和 FlipV 滤镜　　FlipH 和 FlipV 这两个滤镜主要是产生水平翻转和垂直翻转的效果，这两个滤镜没有额外的参数设置，直接使用就可以了。例如：原样 FlipH 水平翻转 FlipV 垂直翻转 图片 文字 这是正常的文字 这是被水平翻转了的文字 这是被垂直翻转了的文字原代码如下：这是被水平翻转了的文字这是被垂直翻转了的文字八、Glow 滤镜　　Glow 效果可以让HTML元件对象的轮廓上产生一种比较柔和的边框，可以说是个晕，并且还有点像火一样有淡化的效果。下表是它的参数：参数名 说明 取值说明 Color 指定晕开阴影的颜色 #RRGGBB 格式的颜色值。 Strength 指定晕开阴影的范围。 设定值从1到255，数字越大晕得就越强，数字越小则反之。示例：

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

效果如下所示：这是利用 Glow 滤镜做的一个火焰字的效果，是不是很 Cool ? 如果那个图片是透明的GIF图片，就更会有意想不到的效果了。不信？你可以自己试试！九、Gray 滤镜　　这个滤镜主要是把一个彩色图片变成黑白的，就像黑白照片一样，这个滤镜也是没有参数，直接使用就可以了。例如：　　可以看出，上面两幅图片中左边的是原样的，而右边的则是被 Gray 了的。并且，我们可以看出红颜色和绿颜色的灰度是一样的，这就是红绿色盲的产生的原因了。十、Invert 滤镜　　该滤镜是反转图片中颜色的色调、饱和度、亮度，这就好像我们看见的照片的底片一样。就是那种效果。例如：　　怎么样？使用了这个滤镜后，就是右边的这个样子了。对了，这个滤镜没有参数，差点忘说了。十一、Mask 滤镜　　这个滤镜可以为网页上的HTML元件对象作出一个矩形遮罩，关于什么是遮罩我也不是说得太清楚，如果你用过Flash中的遮罩，你就会知道了，就是那个样子了，我说不出来。来看一下它的参数：参数名 说明 取值说明 Color 遮罩的颜色 #RRGGBB 格式的颜色值。示例：

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

这是一段以蓝颜色为遮罩色的文字。 这是一段以白颜色为遮罩色的文字。　　在上面的效果中，我故意用了一幅红绿蓝的图片做背景，这样你就更容易知道什么是遮罩了，可见，我以蓝色做为遮罩色，当字在背景为蓝色的地方就不见了，而如果我以白色做为遮罩色的话，你会看见一个五彩缤纷的字，就好像一个被挖空的字。十二、Shadow 滤镜　　Shadow滤镜其实和 DropShadow 很相像，也是给被作用的HTML元件对象产生下落式的阴影效果。但是，两者所不同的是，DropShadow 没有渐进感，而Shadow则有渐进阴影感，看起来就更真实一些。我们可以先看一下它的效果：Shadow 滤镜展示　　感觉如何？是不是很有立体感，这就是Shadow滤镜，好了，让我们来看看它的参数：参数名 说明 取值说明 Color 阴影的颜色 #RRGGBB 格式的颜色值。 Direction 设置模糊的方向。 0（上），45（右上），90（右），135（右下），180（下），225（左下），270（左），315（左上）。　　刚才上面那个效果的代码是：

Shadow 滤镜展示

　　你可以试试把这个效果作用在一幅图片上，要是有一幅透明的GIF图片就更酷了。试试吧！十三、Wave 滤镜　　顾名思义，Wave滤镱可以让HTML元件对象在垂直方向上产生波浪的变形。以下是它的参数：参数名 说明 取值说明 Add 表示是否在已经使用了Wave滤镜的元件对象上显示原对象。 0表示不显示；非0表示要显示原对象。 Freq 设置波动的个数。 自然数。 LightStrength 设置波浪效果的光照强度。 从0到100。0表示最弱，100表示最强。 Phase 波浪的起始相角。 从0到100的百分数值。例如：25相当于90度，而50则相当于180度。 Strength 设置波浪摇摆的幅度。 自然数。　　这里要注意的是Phase参数，它是以正弦波的波形当做初始波形，当设置了相角后，也就是把一个正弦波向左移一段距离。什么是相角呢？这是在高中的数学课里就已经讲过了哦！在这里我就不多说了。　　好了，让我们来看一下该滤镜的示例：你看到波浪文字了吗?是不是比较不错？以下是上面效果的代码：

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

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