网易博客素材、教程、代码基地

请引用的朋友，不要删除链接，谢谢合作

日志

关于我

佳人素材教程基地

和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。

文章分类

【博客*教程】博客常用代码--图片边框

2012-03-24 19:53:36| 分类：【博客初学】 | 标签： |举报 |字号大中小订阅

下载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="图片地址" 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>

五：邮票框

效果：

代码：

<TBODY>

<TR>

六：虚线框

效果：

代码：

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

原创散文	原创文章		原创音画	日记边框
PS教程	U5教程		音画精品	留言祝福
佳人涂鸦	诗歌朗诵		音画教程	边框教程
博客教程	3D教程		F歌曲库	电脑教程
生活常识	点击进入佳人有约博客分享更多精彩...			原创素材
生日节日素材		精品高清素材	背景人物素材
免欧制图素材	闪字动态素材	音画分割素材	天下美食	精品欣赏
健康保健	值得收藏	FLASH总汇	情感攻略

评论这张

转发至微博

阅读(509)| 评论(5)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087066084084089074086086085064072087088068087087087066082086',
              blogTitle:'【博客*教程】博客常用代码--图片边框',
              blogAbstract:'   <P align=\"center\" \>  </P\><CENTER\>  <TABLE title=\"海之女娟子欢迎您。\" style=\"BORDER-LEFT-COLOR: #4b0082; BORDER-BOTTOM-COLOR: #4b0082; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #4b0082; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-RIGHT-COLOR: #4b0082; BORDER-BOTTOM-STYLE: ridge;\"  borderColor=\"#4b0082\" height=\"80\" cellSpacing=\"2\" cellPadding=\"2\" width=\"600\" align=\"center\" border=\"20\" \>  <TBODY\>  <TR\>  <TD colSpan=\"3\" \>  <TABLE title=\"海之女娟子欢迎您。\" borderColor=\"#4b0082\" height=\"80\" cellSpacing=\"2\" cellPadding=\"0\" width=\"600\" align=\"center\" border=\"2\" \>  <TBODY\>  <TR\>  <TD bgColor=\"#000000\" colSpan=\"3\" \>  <P align=\"center\" \><WBR\><STRONG\><FONT color=\"#c0c0c0\" size=\"10\" \>图片加边框代码</FONT\></STRONG\> </P\>  <P align=\"center\" \><FONT color=\"#ffffff\" size=\"4\" \><STRONG\>本文引用之</STRONG\></FONT\></P\></TD\></TR\></TABLE\></TD\></TR\></TABLE\></CENTER\>',
              blogTag:'博客原创教程',
              blogUrl:'blog/static/19731116020122247533668',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:0,
              publishTime:1332590016068,
              permalink:'blog/static/19731116020122247533668',
              commentCount:5,
              mainCommentCount:2,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'和阳光的人在一起,心里就不会晦暗,和快乐的人在一起,嘴角就常带微笑,和进取的人在一起,行动就不会落后,和大方的人在一起,处事就不小气,和睿智的人在一起,遇事就不迷茫,和聪明的人在一起,做事就变机敏。——借人之智,完善自己。学最好的别人,做最好的自己。',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/19731116020122247533668">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易博客素材、教程、代码基地

导航

日志

【博客*教程】博客常用代码--图片边框

历史上的今天

最近读者

热度

评论

页脚