CSS滤镜 123
1、概述
CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：
filter：filtername（parameters）
Filter是滤镜属性选择符。
也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：
上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。
2、alpha属性
alpha是来设置透明度的。先来看一下它的表达格式：
filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
实现上面这种效果的代码如下：
<html>
<head>
<title>alpha</title>
<style>//*定义CSS样式*//
<!--
div{position：absolute； left：50；top：70； width：150； }
//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//
img{position：absolute；top：20；left：40；
filter：alpha(opacity=80)}
//*定义图片的样式，绝对定位，滤镜属性是透明度为80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>//*定义字体属性，前景色为红色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*导入一张图片*//
</body>
</html>
如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：
img{position：absolute；top：20；left：40；
filter：alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}
//*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为 线形*//
这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果
Style=1
Style=2
Style=3
3、blur属性
假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
先来看一下blur属性的表达式：
filter：blur（add=add，direction，strength=strength）
我们看到blur属性有三个参数：add、direction、strength。
Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：
Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
还是看一个例子吧。
看起来是不是有些像万花筒，在这个例子中加入了一些JavaScript的语句，代码如下：
<html>
<head>
<title>blur css</title>
<script>
function handlechange(obj)
//*设置一个循环函数handlechange，对象是obj*//
{ with(obj.filters(0))//*Obj的filter属性*//
{ if (strength<255)//*设置循环条件*//
{ strength +=1；direction +=45；}
//*每循环一次strength就加1，direction加45度*//
}
}
</script>
</head>
<body>
<p><img id =“img1” src=“ss01087.jpg”
style=“filter：blur(strength=1)”
onfilterchange=“handlechange(this)”>
//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函
数*//
</p>
</body>
</html>
注：在javascript中blur属性是这样定义的：
[oBlurfilter=] object.Filters.blur
通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）：
怎么样，是不是有些印象派的意思，这种效果的实现代码如下：
<html>
<head>
<title>filter blur</title>
<style>//*CSS样式定义开始*//
<!--
div{width：200；
filter：blur(add=true,direction=90,strength=25)；}
//*设置DIV样式，滤镜blur属性*//
-->
</style>
</head>
<body>
<div style=“width:702； height: 288”>
<p style=“font-family:lucida handwirting italic；
font-size:72；font-style:bold；color:rgb(55,72,145)；” >
LEAF</p>
//*定义字体名称、大小、样式、前景色*//
</div>
</body>
</html>
我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：
用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
