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

熙滢嫣雨

孤支拙笔挥性情,嫣雨此生偕老吟。

 
 
 

日志

 
 

【引用】博客常用代码--图片边框  

2012-06-03 15:48:58|  分类: 博客装扮制作素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

空灵博客常用代码--图片边框
           图片加边框代码
 
这里和大家说的是,只需用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、粒状阴影框   

图片加边框代码 - 空灵 - 空灵的小屋

        当然以上代码也可用在制作日记的边框上,或者个人档案里
       的文字和图片,大家可以举一反三。颜色可以改为自己喜欢的.

博客常用代码--图片边框

博客常用代码--图片边框

博客常用代码--图片边框

一:单线框

效果一:单线框

效果:

图片加边框代码 - 空灵 - 空灵的小屋

 

代码:

代码:

<center><img src="图片地址" style="border:3 solid #ff0000"><br><br><br></center>

<center><img src="图片地址" style="border:3 solid #ff0000"><br><br><br></center>

二:双线框

效果二:双线框

效果:

图片加边框代码 - 空灵 - 空灵的小屋

 

代码:

<center> 

<img src="图片地址" width=640 height=480 style="border:5 double green"><br><br><br></center>

三:凸出框

效果:

图片加边框代码 - 空灵 - 空灵的小屋

代码:

<center> 

<img src="图片地址"style="border:25 outset #FF00FF"><br><br><br></center>

四:凹进框

效果:

  图片加边框代码 - 空灵 - 空灵的小屋

代码:

<center> <img src="图片地址" style="border:25 inset #ff00ff"><br></center>

五:邮票框

效果:

 

图片加边框代码 - 空灵 - 空灵的小屋

代码:

<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 256px; BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT: 200px" cellSpacing=5 cellPadding=0 bgColor=#f6ae56>

<TBODY>

<TR>

<TD vAlign=center align=middle height=200><FONT size=4><IMG style="WIDTH: 640px; HEIGHT: 480px" height=480 src="图片地址" width=640></FONT></TD></TR></TBODY></TABLE>

六:虚线框

效果:

  图片加边框代码 - 空灵 - 空灵的小屋

代码:

<CENTER><IMG style="BORDER-RIGHT: #ff0000 4px dashed; BORDER-TOP: #ff0000 4px dashed; BORDER-LEFT: #ff0000 4px dashed; BORDER-BOTTOM: #ff0000 4px dashed" src="图片地址"><BR><BR><BR></CENTER>

七:立体阴影框

效果:

图片加边框代码 - 空灵 - 空灵的小屋
 

代码:

<CENTER>

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=400 cellSpacing=3 cellPadding=15 width=400 border=2>

<TBODY>

<TR>

<TD vAlign=center align=middle bgColor=#ffffff><IMG src="图片地址"></TD></TR></TBODY></TABLE></CENTER>

八:粒状阴影框

效果:

 

图片加边框代码 - 空灵 - 空灵的小屋

代码:

<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30" src="图片地址"> 

九:脊状框

效果:

图片加边框代码 - 空灵 - 空灵的小屋

代码:

<img src="图片地址" style="border:25 ridge green" border="0"><br><br><br></center>

 
  评论这张
 
阅读(66)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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