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

夕阳无限美博客

*资源共享*喜欢即取*

 
 
 

日志

 
 

【代码应用】用代码给图片加边框  

2011-10-15 23:04:30|  分类: 【代码应用】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

自制自用模板(17) - 夕阳无限美 - 夕阳无限美欢迎您 

给图片加边框的代码


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">

 

给图片加边框
     代码: 
     <CENTER><IMG style="BORDER-RIGHT: 

#ff99ff 3px solid; BORDER-TOP: #ff99ff 3px solid;  
     BORDER-LEFT: #ff99ff 3px solid; BORDER-BOTTOM: #ff99ff 3px solid"
     src="http://img74.ph.126.net/2QDLSIDge05MCVvETSnbUQ=

=/850898854598136982.jpg">
     </CENTER >
 效果:  

2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您
  


10·给图片加边框

     代码:

     <CENTER><IMG style="BORDER-RIGHT: green 7px double;

 BORDER-TOP: green 7px double;

     BORDER-LEFT: green 7px double; BORDER-BOTTOM:

 green 7px double"

     src="http://img533.ph.126.net/rqVXVBUfNQUztUk4JNT9xw=

=/2597451085087149425.jpg">

     </CENTER>

    效果:

2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您

 

11·给图片加立体边框
     
 代码1:
      <CENTER><IMG style="BORDER-RIGHT: #ff3333 25px outset;
 BORDER-TOP: #ff3333 25px outset;
      BORDER-LEFT: #ff3333 25px outset; BORDER-BOTTOM: 
#ff3333 25px outset"
src="http://img158.ph.126.net/Xd950UxARkrTiPJqTtSdzA=
=/1496039501219167168.jpg">
</CENTER>  

效果1· 
2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您
  

代码2:
<CENTER><IMG style="BORDER-RIGHT: #6666ff 25px inset;
 BORDER-TOP: #6666ff 25px inset;
BORDER-LEFT: #6666ff 25px inset; BORDER-BOTTOM: #6666ff 25px inset"
src="http://img161.ph.126.net/3aUAsTjz-zziPfCEPJDaYA=
=/2151594721977801524.jpg">
</CENTER>
果2:


2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您

代码3: 

<img style="BORDER-RIGHT: #339900 25px groove; BORDER-TOP: #339900 25px groove;
   BORDER-LEFT: #339900 25px groove; BORDER-BOTTOM: #339900 25px groove" src="http://img.blog.163.com/photo/I5c9zg9sT2RJE5l-0kbY-g==/1745989280536593959.jpg" ;="" center="">

效果3:

【代码应用】给图片加边框 - 夕阳无限美 - 夕阳无限美欢迎您

代码4:

<CENTER><IMG style="BORDER-RIGHT: #ccffcc 25px ridge;

 BORDER-TOP: #ccffcc 25px ridge;

BORDER-LEFT: #ccffcc 25px ridge; BORDER-BOTTOM:

 #ccffcc 25px ridge"

src=http://img615.ph.126.net/rHp2R0vbCJoIxjz8t3g2pw=

=/1671116936732893552.jpg

border=0></CENTER>

效果4:


2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您

 

12·给图片加虚线
代码:
<CENTER><IMG style="BORDER-RIGHT: #ff6633 7px
 dashed; BORDER-TOP: #ff6633 7px dashed;
BORDER-LEFT: #ff6633 7px dashed; BORDER-BOTTOM: #ff6633 7px dashed"
src="http://img.ph.126.net/bZkxVwZ0CoO7s0wP708rzw=
=/1624110615622350976.jpg">
 
效果


2013年02月15日 - 夕阳无限美 - 夕阳无限美欢迎您
 

自制自用模板(17) - 夕阳无限美 - 夕阳无限美欢迎您


  评论这张
 
阅读(1115)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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