加载中…23种CSS图片修饰效果演示与代码
(2010-10-07 17:58:35)
标签：
杂谈 |
分类： 博客通用代码 |
|
23种CSS图片修饰效果演示 1。单线框 http://www.dyh365.net/xlyh/4/1.jpg <center><img src="http://www.dyh365.net/xlyh/4/1.jpg" style="border:3 solid #ff0000"><br><br><br></center> 2.双线框 http://www.dyh365.net/xlyh/4/2.jpg <center> <img src="http://www.dyh365.net/xlyh/4/2.jpg" style="border:5 double green"><br><br><br></center> 3.凸出框 代码如下: <center> <img src="http://www.dyh365.net/xlyh/4/3.jpg"style="border:25 outset #ff88ff"><br><br><br></center> 4.凹进框 代码如下: <center> <img src="http://www.dyh365.net/xlyh/4/4.jpg" style="border:25 inset #ff88ff"><br><br><br></center> 5.邮票框
代码如下: <center> <table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"> <tr><td bgcolor="#aeffae" width=600 height=450 align=center valign=middle><img src="http://www.dyh365.net/xlyh/4/5.jpg"> </td></tr></table></center> 6.虚线框 代码如下: <center> <img src="http://www.dyh365.net/xlyh/4/6.jpg" style="border:4 dashed #ff0000"><br><br><br></center> 7.凹槽框 代码如下: <center> <img src="http://www.dyh365.net/xlyh/4/7.jpg" style="border:25 groove green" border="0"><br><br><br></center> 8.脊状框 代码如下: <center> <img src="http://www.dyh365.net/xlyh/4/8.jpg" style="border:25 ridge green" border="0"><br><br><br></center> 9。立体阴影框
代码如下: <center> <table width=400 height=400 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="http://www.dyh365.net/xlyh/4/9.jpg"></td></tr></table></center> 10。阴影框 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/10.jpg" style="filter:shadow(color=#32cd32)"></center> 11。横向渐变透明 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/11.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"></center> 12。圆形渐变透明 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/12.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center> 13。X形渐变透明 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/13.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center> 14。改变某种颜色 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/14.jpg"style="FILTER: Chroma(Color=#13629f)"></center> 15。黑白效果 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/15.jpg" style="filter:'gray'"></center> 16。X光效果（底片） 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/16.jpg" style="filter:'xray'"></center> 17。浮雕效果 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/17.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center> 18。上下颠倒 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/18.jpg" style="filter:flipv"> </center> 19。左右颠倒 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/19.jpg" style="filter:fliph"></center> 20。色彩颠倒 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/20.jpg" style="filter:invert"></center> 21。粒状阴影 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/21.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center> 22。模糊效果 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/22.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"></center> 23。水波效果（风吹） 代码如下: <center><img src="http://www.dyh365.net/xlyh/4/23.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center> 这些图片单独欣赏看起来不大显眼，但如果与其他代码结合起来，如JS等，再加上巧妙的构思，一定会使你的帖子更加精彩。因为不管多么复杂的页面都是由不同的代码组合而成的，请大家发挥自己的想象力和各自的创意，期待你更多更美的精品展现！
|
喜欢
0
赠金笔