引用
玫瑰夫人 的 html代码——给图片加边框代码
图片加边框代码这里教大家只需用html代码就能给你的图片加出各种漂亮的相框,使用方法,点“<>”加入代码,换上你的图片网址,适当调整宽度和颜色,就可以让你的图片锦上添花!下面是代码:1、简单线框<img src="图片地址" style="border:5 solid #ffCCCC">
2、双线框
<img src="图片地址" style=" border:7 double #666FF">
3、虚线框
<img src="图片地址" style=" border:3 dashed #990000">
4、凸出框:
<img src="图片地址" style="border:10 outset #CCCCFF">
5、嵌入框:
<img src="图片地址" style="border:15 inset #ff9900">
6、脊状框:
<img src="图片地址" style="border:15 ridge #33FF66">
7、凹槽框
<img src="图片地址" style="border:15 groove #CC6666">
8、粒状阴影框
<img src="图片地址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30">
做个效果:
一
原图:
1、简单线框
2、双线框
3、虚线框
4、凸出框:
5、嵌入框:
6、脊状框:
7、凹槽框
8、粒状阴影框
代码:
<P> 1、简单线框 </P>
<P> <IMG style="BORDER-RIGHT: #ffcccc 5px solid; BORDER-TOP: #ffcccc 5px solid; BORDER-LEFT: #ffcccc 5px solid; BORDER-BOTTOM: #ffcccc 5px solid" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 2、双线框 </P>
<P> <IMG style="BORDER-RIGHT: 7px double; BORDER-TOP: 7px double; BORDER-LEFT: 7px double; BORDER-BOTTOM: 7px double" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 3、虚线框 </P>
<P> <IMG style="BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 4、凸出框: </P>
<P> <IMG style="BORDER-RIGHT: #ccccff 10px outset; BORDER-TOP: #ccccff 10px outset; BORDER-LEFT: #ccccff 10px outset; BORDER-BOTTOM: #ccccff 10px outset" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 5、嵌入框: </P>
<P> <IMG style="BORDER-RIGHT: #ff9900 15px inset; BORDER-TOP: #ff9900 15px inset; BORDER-LEFT: #ff9900 15px inset; BORDER-BOTTOM: #ff9900 15px inset" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 6、脊状框: </P>
<P><IMG style="BORDER-RIGHT: #33ff66 15px ridge; BORDER-TOP: #33ff66 15px ridge; BORDER-LEFT: #33ff66 15px ridge; BORDER-BOTTOM: #33ff66 15px ridge" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P> 7、凹槽框 </P>
<P> <IMG style="BORDER-RIGHT: #cc6666 15px groove; BORDER-TOP: #cc6666 15px groove; BORDER-LEFT: #cc6666 15px groove; BORDER-BOTTOM: #cc6666 15px groove" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
<P>8、粒状阴影框 </P>
<P><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://img.blog.163.com/photo/IQXeLjdqencTITjSQeKQ0g==/2880896386633654789.jpg"> </P>
——————————————————
二
原图: 1. 图片单边框的代码:
<center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:3 solid #ff0000"></center>下面是一的效果图: 2.图片双边框的代码:
<center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:5 double green"></center>下面是二的效果图: 3.立体镜框的代码(一):
<center><img src=http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg
style="border:25 outset #ff88ff"></center>下面是三的效果图: 4.立体镜框的代码(二):
<center><img
src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 inset #ff88ff"></center>下面是四的效果图: 5.虚线框的代码:
<center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:4 dashed #ff0000"></center>下面是五的效果图: 6.凹槽框的代码:
<center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 groove green" border="0"></center>下面是六的效果图: 7.脊状框的代码:
<center> <img src="http://img.blog.163.com/photo/eoEb_OuOuUmR5em3pNsqjw==/1149262329909942520.jpg" style="border:25 ridge green" border="0"></center>下面是七的效果图:
八:立体阴影框代码如下:
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=100 cellSpacing=3 cellPadding=15 width=100 border=2>
<TBODY>
<TR>
<TD Align=center align=middle bgColor=#ffffff><IMG src="图片地址"></TD></TR></TBODY></TABLE>效果图:
九:立状阴影代码如下:
<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)" src="图片地址">
效果图:
当然以上代码也可用在制作日记的边框上,或者个人档案里的文字和图片,大家可以举一反三。颜色可以改为自己喜欢的。
全屏FLASH代码
注意:&要换成小写&
<img src=";nnerHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''地址\'' quality=high wmode=\''transparent\'' WIDTH=\''775\'' HEIGHT=\''655\'' TYPE=\''application/x-shockwave-flash\''></div>'';">
或者
<img src=";rHTML+=''<div style=\'';top:0;left:0;\''><EMBED src=\''FLASH地址\''quality=high wmode=\''transparent\'' WIDTH=\''1000\'' HEIGHT=\''700\'' TYPE=\''application/x-shockwave-flash\''></div></div>'';">
评论