滤镜综合的例子
可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。
例：
- 黑白照片 filter: gray;
- X光照片 filter: Xray;
- 风动模糊 filter: blur(add=true,direction=45,strength=30);
- 正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
- 半透明效果 filter: Alpha(Opacity=50);
- 线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
- 放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
- 白色透明 filter: Chroma(Color=#FFFFFF);
- 降低色彩 filter: grays;
- 底片效果 filter: invert;
- 左右翻转 filter: fliph;
- 垂直翻转 filter: flipv;
- 投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
- 马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
- 发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
- 柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2
滤镜综合的例子
<style type="text/css">
#paneldiv div
{
background-Color:yellow;
height:200px;
width:200px;
}
</style>
<div id="paneldiv" style="width:230px;height:2300px;
background-color:Blue;">
<div style="filter:alpha(opacity=0,finishopacity=80,style=1,
startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;">
alpha效果:<br />
</div>
<div style="filter:blur(add=1,direction=100,strength=5);">
blur效果：<br />
add为1代表字有阴影，0代表字全部模糊。
abcdefghijklmnopqrstuvwxyz
</div>
<div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';">
chroma效果：<br />
原为黄色，单击变成红色变成透明，双击变成黑色。
</div>
<div style="filter:FlipH;">
fliph效果：<br />
ABCDEFGH<br />
IJKLMNOP<br />
此属性在设置宽高后有效
</div>
<div style="filter:FlipV;">
flipv效果：<br />
ABCDEFGH<br />
IJKLMNOP<br />
此属性在设置宽高后有效
</div>
<div style="filter:gray;">
gray效果：<br />
abcdefghijklmn
</div>
<div style="filter:invert; text-transform:uppercase;color:Red;">
invert效果：<br />
背景色变成相反颜色，如黑变成白。
</div>
<div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">
wave效果：<br />
Add：一般为1，或0。(0表示上下波浪)
Freq：变形值。(指定多少个波浪)
LightStrength：变形百分比。(变形后的阴影。)
Phase：角度变形百分比。(弯曲的角度) Strength：变形强度。(数值越大，DIV变形就越大。)
</div>
<div style="filter:Xray">
xray效果：<br />
sfasdfasdfasdfsadf
</div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">
progid:dximagetransform.microsoft.gradient效果：<br />
endendendendendendendendendend
</div>
</div>
<div style="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;">
dropshadow效果：<br />
此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。
</div>
<div style="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;">
glow效果：<br />
strength的光的强度0--100；此时不能设DIV的背景色。
</div>
<div style="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; ">
mask效果：<br />
没有明显效果,不能设背景色。
</div>
<div style="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;">
shadow效果：<br />
abcdefghijklmn
</div>
<div style="filter:Xray;width:100px;height:100px;
background-color:red;">
xray效果：<br />
sfasdfasdfasdfsadf
</div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;">
渐变效果。
endendendendendendendendendend
</div>
<div style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;">
lsksalsslalalalalalalal
</div>
<div style="filter:alpha(opacity=100, finishOpacity=0,style=2);
width:100px; height:100px;background-color:Yellow;">
</div>