CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML标签上，这对要在网页上产生特殊视觉显示效果的电脑美术创作人员来说，非常游泳。有边界区域的元素，如表格、图片等，才可以直接使用CSS滤镜特效。类似段落<p>这种没有边界区域的标签，不能直接使用CSS滤镜，但是，设置这些元素的Height和Width样式属性，使之成为一个区域元素后，就可以使用CSS滤镜了。
要在网页中实现滤镜特效，需要设置filter属性的各种参数值，每个参数值之间用空格分隔。有的参数值需要由若干子参数组成，下面来讲解filter属性的各个参数和对应的滤镜效果。
1.Alpha参数
Alpha参数用来控制一个元素与背景混合的程度，通俗地说就是一个元素的透明度。Alpha参数中需要设置若干子参数，设置格式如下所示：
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=? ,StartY=?, FinishX=?, FinishY=? )
Opacity：表示透明度级别，范围是0～100，0代表完全透明，100代表完全不透明。
FinishOpacity：可选参数，设置渐变的透明效果时，用来指定结束时的透明度，范围也是0～100。
Style：设置渐变透明的样式，值为0代表统一形状，1代表线性，2代表放射状，3代表长方形。
StartX和StartY：代表渐变透明效果的开始位置的X和Y坐标。
FinishX和FinishY：代表渐变透明效果的结束位置的X和Y坐标。
例：
<html>
<head>
<style type="text/css">
<!--
.aaa{filter:Alpha(Opacity=100, FinishOpacity=0, Style=2,StartX=0,StartY=0,FinishX=550,FinishY=450);}
-->
</style>
</head>
<body style="background:#000;">
<img src="../Pictures/痴燕归巢质感项链.jpg" width="800" height="800" class="aaa">
</body>
</html>
2.DropShadow参数
DropShadow参数用于建立阴影效果，需要设置若干子参数，设置格式如下所示：
DropShadow(Color=? , OffX=?,OffY=?,Positive=?)
Color：指定阴影的颜色。
OffX：指定阴影相对于元素在水平方向偏移量，整数。
OffY：指定阴影相对于元素在垂直方向偏移量，整数。
Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false（0），表示为建立内阴影。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.bb{filter:DropShaDow(Color=red, OffX=2, OffY=2,Positive=1); font-size:30px;}
-->
</style>
</head>
<body class="bb">
整体设计风格
</body>
</html>
3.Blur参数
Blur参数用于建立模糊效果，就像用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊的那种效果。Blur参数中需要设置若干子参数，设置格式如下所示：
Blur (Add=?, Direction=? ,Strength=?)
Add：是否单方向模糊，此参数是一个布尔值，true或false，默认值为true。
Direction：设置模糊的方向，设置值是一个代表角度的数值，应为45的整数倍，其中0度代表垂直向上，按顺时针的方向旋转。
Strength：代表有多少像素的宽度将收到模糊影响，默认是5个。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.bb{filter:blur(Add=true, Direction=90,strength=20);}
-->
</style>
</head>
<body class="bb">
整体设计风格
</body>
</html>
4.Glow参数
Glow参数用于设置元素边缘产生类似发光的效果，需要设置若干子参数，设置格式如下所示：
Glow（Color=?, Strength=?）
Color：指定发光的颜色。
Strength：指定发光的强度，可以是1～255之间的任何整数，字数越大，发光的范围就越大。
5.BlendTrans参数
BlendTrans参数用于设置淡入和淡出的效果，需要设置子参数，设置格式如下所示：
BlendTrans（Duration=?）
Duration：设置淡入或淡出的时间。
6.Wave参数
Wave参数用于实现波纹效果，需要设置若干子参数，设置格式如下所示：
Wave（Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?）
Add：设置原对象是否按照波形样式扭曲，0表示不扭曲，非0表示要扭曲原对象。
Freq：设置完整波纹的个数。
LightStrength：设置波浪效果的光照强度，从0～100，0表示最弱，100表示最强。
Phase：设置波浪的起始角度。从0～100的百分数值。例如，25相当于90度，而50相当于180度。
Strength：设置波浪摇摆的幅度。
7.RevealTrans参数
RevealTrans参数用于建立元素初始显示的转换效果，需要设置若干子参数，设置格式如下所示：
RevealTrans（Duration=?, Transition=?）
Duration：切换时间，以秒为单位。
Transition：切换方式，可以设置为0～23，每个数字对应不同的切换效果，可以在实践中观察
8.无子参的参数
除了上述介绍的带子参的参数外，还有以下不带参数的情况。主要有以下几种：
FlipH参数：用于将元素水平反转，不需要设置子参数值。
FlipV参数：用于将元素垂直反转，不需要设置子参数值。
Gray参数：用于去掉图像的颜色，显示为黑白图像，不用设置子参数值。
Invert参数：用于反转图像的颜色，产生类似底片的效果，不用设置子参数值。
Light参数：用于设置光源效果，可以用来模拟光源在物体上的投影效果，不用设置子参数值。
Xray参数：用于显示图片的轮廓，产生X光片效果，不用设置子参数值。
4545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
