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

请新建文件TestImage.html

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

<! 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=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 >

 
效果如下：