打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
给图片加边框代码
图片加边框代码
这里教大家只需用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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.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://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.jpg">   </P>
<P>8、粒状阴影框   </P>
<P><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="http://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_1.jpg"> </P>
——————————————————
原图: 
 1. 图片单边框的代码:
<center><img
src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg" style="border:3 solid #ff0000"></center>
下面是一的效果图:
 2.图片双边框的代码:
<center><img
src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg" style="border:5 double green"></center>
下面是二的效果图:
 3.立体镜框的代码(一):
<center><img src=http://image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg
style="border:25 outset #ff88ff"></center>
下面是三的效果图:
 4.立体镜框的代码(二):
<center><img
src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg" style="border:25 inset #ff88ff"></center>
下面是四的效果图:
5.虚线框的代码:
<center> <img src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg" style="border:4 dashed #ff0000"></center>
下面是五的效果图:
 6.凹槽框的代码:
<center> <img src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.jpg" style="border:25 groove green" border="0"></center>
下面是六的效果图:
7.脊状框的代码:
<center> <img src="//image4.360doc.com/DownloadImg/2009/3/26/92346_2922658_2.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>'';">
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
图片加边框代码与效果
图片加线框的方法与代码
八种给图片加边框的简单代码及效果图
九款简单的图框代码
给图片增加画框代码
用代码给图片加边框
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服