filter
Filter是微软对CSS的扩展，与PhotoShop中的滤镜概念相似，它可以用很简单的方法对页面中的文字特效作出特效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果。下面我来仔细讲解一下（以下内容需在IE4.0下浏览）：静态滤镜：
要显示滤镜效果，必须先建立一个区域（<div>），并规定区域的范围（width和height），以下是对一个一般区域的规定：
<style>
<!--
div {height:50;width:300;font-size:20pt}
//-->
</style>
把此样式单放入到“<head>”标记和“<body>”之间，然后在“<body>”标记间填写正文：
<div>…………</div>
在“<div>”标记中插入样式单：
style="filter:样式(参数1,参数2,参数3……);"
下面给出完整的例子：
<HTML>
<style>
div {height:100;width:400;font-size:20pt}
</style>
<body bgcolor=yellow>
<h1 align=center>Filter Effects</h1><hr>
<div style="filter:wave(add=0,freq=1,lightStrength=20,phase=50,strength=20)">
<img src="00cirr.gif">
this is div<br>is <br>wave-filtered
</div>
<div style="filter:alpha(opacity=10,finishOpacity=10,style=10,startX=10,startY=10,finishX=20,finishY=30,add=0,direction=45,strength=10)">
this is alpha.
<img src=00cirr.gif>
</div>
<div style="filter:blur(add=0,direction=45,strength=5)">
this is blur effect.
<img src=00cirr.gif>
</div>
<div style="filter:chroma(color=white)">
this is chroma effect
<img src=00cirr.gif>
</div>
<br>
<div style="filter:flipV">
this is flipV effect
<img src=00cirr.gif>
</div>
</body>
</html>
以wave滤镜为例，它在垂直方向产生正弦波形，其中参数add表示是否加入原图象（1=是，0=否），freq表示波的数量，phase表示波形的起始偏移量，lightStrength表示光对波纹照射的强度，strength表示波的强度。下表是Filter支持的所有滤镜样式及其参数：
Filter样式
简要说明
支持参数
alpha
设置图片或文字的不透明度
opacity、finishOpacity、style、startX、startY、finishX、finishY、add、direction、strength
blur
在指定的方向和位置上产生动感模糊效果
add、direction、strength
chroma
对所选择的颜色进行透明处理
color
dropShadow
在指定的方向和位置上产生阴影
color、offX、offY、positive
flipH
沿水平方向翻转对象
flipV
沿垂直方向翻转对象
glow
在对象周围上发光
color、strength
gray
将对象以灰度处理
invert
逆转对象颜色
light
对对象进行模拟光照
mask
对对象生成掩膜
color
shadow
沿对象边缘产生阴影
color、direction
wave
在垂直方向产生正弦波形
add、freq、lightStrength、phase、strength
xray
改变对象颜色深度，并绘制黑白图象
其中经常出现的color属性可以用十六进制表示（如#ff0000），也可以用rgb()表示（如
rgb(255,0,0)），还可用系统承认的颜色名表示（如red）。
以上就是静态滤镜的全部内容，要注意的是CSS是区分大小写的！
页:
[1]