html代码——给图片加边框代码
引用
玫瑰夫人 的 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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.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/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.jpg"> </P>
<P>8、粒状阴影框 </P>
<P><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://img.blog.163.com/photo/PF6xbZQU3JEsEgFvU3bKxA==/2866541162821475144.jpg"> </P>
——————————————————
二
原图：
1. 图片单边框的代码:
<center><img
src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg" style="border:3 solid #ff0000"></center>
下面是一的效果图:
2.图片双边框的代码:
<center><img
src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg" style="border:5 double green"></center>
下面是二的效果图:
3.立体镜框的代码（一）:
<center><img src=http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg
style="border:25 outset #ff88ff"></center>
下面是三的效果图:
4.立体镜框的代码（二）:
<center><img
src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg" style="border:25 inset #ff88ff"></center>
下面是四的效果图:
5.虚线框的代码:
<center> <img src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg" style="border:4 dashed #ff0000"></center>
下面是五的效果图:
6.凹槽框的代码:
<center> <img src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.jpg" style="border:25 groove green" border="0"></center>
下面是六的效果图:
7.脊状框的代码:
<center> <img src="http://img.blog.163.com/photo/4ZRtRE_vAVPSz5aHFlAVsg==/438256538739777433.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>'';">
