图片具有特殊效果的代码-附演示图

我们浏览网页时候,常常发现一些图片具有相框或者暗影,立体效果,除了图片本身的因素之外,还有代码可以实现。

代码及图片演示如下:

1—均匀柔边效果
<img src="图片地址" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">

 2—线状柔边效果(左往右)
<img src="图片地址" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">
 
3—圆形柔边效果(外向内)
<img src="图片地址" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">

4—圆形柔边效果(内向外)
<img src="图片地址" style="filter:alpha(opacity=100, finishOpacity=0,style=3)">

5—灰色效果
<img src="图片地址" style="filter: gray">

6—X光效果
<img src="图片地址" style="filter: Xray">


7—色彩对换效果
<img src="图片地址" style="filter:invert">


8—左右翻转效果
<img src="图片地址" style="filter:FlipH()">

9—上下翻转效果
<img src="图片地址" style="filter:FlipV()">


10—发光效果
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 488px; HEIGHT: 324px" align=center><br><IMG src="图片地址"></DIV>

 

11—投射阴影效果
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 478px; HEIGHT: 295px" align=center><br><IMG src="图片地址"></DIV>
 

12—模糊效果
<DIV style="FILTER: Blur(direction=135); WIDTH: 488px; HEIGHT: 324px" align=center><br><IMG src="图片地址"></DIV>
 

13—波形效果
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 488px; HEIGHT: 324px"><br><IMG src="图片地址"></DIV>

 

14—波形加上半透明合成效果
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 488px; HEIGHT: 324px"><br><img src="图片地址" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>