欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!

 

用CSS滤镜制作的图片效果

   一张普通的图片



代码: img src="images/xxlha/DSC00228.JPG";

单线框


img src="images/xxlha/DSC00228.JPG" style="border:3 solid #ff0000";


双线框


img src="images/xxlha/DSC00228.JPG" style="border:5 double #ff0000";


凸出框


img src="images/xxlha/DSC00228.JPG"style="border:25 outset green";


凹进框


img src="images/xxlha/DSC00228.JPG" style="border:25 inset green";


凹槽框


img src="images/xxlha/DSC00228.JPG" style="border:25 groove green" border="0";


脊状框


img src="images/xxlha/DSC00228.JPG" style="border:25 ridge green" border="0";


邮票框
   

table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56";
tr;<td bgcolor="#aeffae";<img src="images/xxlha/DSC00228.JPG";
/td;</tr;</table;


虚线框
   

img src="images/xxlha/DSC00228.JPG" style="border:4 dashed #ff0000";


立体阴影框

   


table width=250 height=250 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)";
tr;<td bgcolor="#ffffff" align=center valign=middle;<img src="images/xxlha/DSC00228.JPG";</td;</tr;</table;


横向渐变透明


img src="images/xxlha/DSC00228.JPG" style="filter=alpha(opacity=100,style=1,finishopacity=0)";


圆形渐变透明


img src="images/xxlha/DSC00228.JPG" style="filter=alpha(opacity=100,style=2,finishopacity=0)";


X形渐变透明


img src="images/xxlha/DSC00228.JPG" style="filter=alpha(opacity=100,style=3,finishopacity=0)";


方形渐变透明


IMG src="images/xxlha/DSC00228.JPG" style="FILTER: Alpha(opacity=200,style=3)" width=250 height=250 ALGIN="MIDDLE";



模糊效果


img src="images/xxlha/DSC00228.JPG" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)";


水波效果(风吹)


img src="images/xxlha/DSC00228.JPG" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)";


浮雕效果


img src="images/xxlha/DSC00228.JPG" style="filter:progid:DXImageTransform.Microsoft.Emboss()";


粒状阴影


img src="images/xxlha/DSC00228.JPG" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)";

 

2008年3月12日