静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

请新建文件TestImage.html

注意：静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
欢迎与邀月交流,net技术与软件架构
内容如下，(可自行修改)：

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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=gb2312" />
< title > 测试图片效果 </ title >
< style > ...
.Filter1
{...} {
filter : Alpha(opacity=50,finishOpacity=80,style=0) ;
}
.Filter2
{...} {
filter : FlipH ;
}
.Filter3
{...} {
filter : FlipV ;
}
.Filter4
{...} {
filter : Gray ;
}
.Filter5
{...} {
filter : Xray ;
}
.Filter6
{...} {
filter : Invert ;
}
.Filter7
{...} {
filter : Glow(color=#4A7AC9,strength=50) ;
}
.Filter8
{...} {
filter : Shadow(color=#000000,direction=135) ;
}
.Filter9
{...} {
filter : Dropshadow(color=#000000,offX=50,offY=50) ;
}
.Filter10
{...} {
filter : Blur(direction=135) ;
}
.Filter11
{...} {
filter : Wave(freq=7,strength=9,lightstrength=5,phase=5) ;
}

</ style >
</ head >

< body >
< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
< tr >
< td > 原图 < br /></ td >
</ tr >
< tr >
< td >< img src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="原图" /></ td >
</ tr >
< tr >
< td >< br />
半透明 < br />
opacity:开始处的透明度。 < br />

finishOpacity:结束处的透明度。 < br />

style:0为平均透明1为线状透明2为圆形透明3为菱形透明 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter1" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="" /></ td >
</ tr >
< tr >
< td >< br />
左右翻转 < br />
</ td >
</ tr >
< tr >
< td >< img class ="Filter2" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="左右翻转" /></ td >
</ tr >
< tr >
< td >< br />
上下翻转 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter3" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="上下翻转" /></ td >
</ tr >
< tr >
< td >< br />
灰度 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter4" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="灰度" /></ td >
</ tr >
< tr >
< td >< br />
X光 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter5" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="X光" /></ td >
</ tr >
< tr >
< td >< br />
色彩对换 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter6" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="色彩对换" /></ td >
</ tr >
< tr >
< td >< br />
发光边框 < br />
color为发光颜色代码,strength是发光强度,滤镜宽=图宽+发光强度x2,滤镜高=图高+发光强度x2+10 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter7" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="发光边框" /></ td >
</ tr >
< tr >
< td >< br />
投影边框 < br />
color为发光颜色代码,direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+25,濾鏡高=图高+40 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter8" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="投影边框" /></ td >
</ tr >
< tr >
< td >< br />
阴影边框 < br />
color为发光颜色代码,offX表示水平位移offY表示垂直位移(可正可负),滤镜宽=图宽+水平位移绝对值+10,滤镜高=图高+垂直位移绝对值+2) < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter9" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="阴影边框" /></ td >
</ tr >
< tr >
< td >< br />
模糊边框 < br />
Direction表示方向(只能是45度的倍数如:45,90,135,180,225,270,315度),滤镜宽=图宽+15,濾鏡高=图高+30 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter10" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="模糊边框" /></ td >
</ tr >
< tr >
< td >< br />
波形边框 < br />
Freq表示波形频率(>0)，strength表示振幅强度(>0)，lightstrength表示波峰强度(0~100愈高越黑)，phase表示起始相位(0~100),滤镜宽=图宽+振幅强度x2
滤镜高=图高+振幅强度x2+10 < br /></ td >
</ tr >
< tr >
< td >< img class ="Filter11" src ="http://botu.bokee.com/photodata/2006-11-29/005/628/748/4609138/4609138.jpg" alt ="波形边框" /></ td >
</ tr >


</ table >

</ body >
</ html >

效果如下：