CSS中的Filter样式特效2

四、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>