注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

html代码——给图片加边框代码  

2008-01-31 10:37:57|  分类: 博客制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

玫瑰夫人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>'';">

 

欢迎点击进入玫瑰茶苑更多精彩

 

  评论这张
 
阅读(495)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017