博客空间文章背景边框代码大全及使用方法

字号：大 中 小

【内容介绍】和讯博客,新浪博客,网易博客,搜狐博客,51空间,校内网的博客日志文章添加背景多种外框让文字在图片上写作多种风格代码的详细说明介绍......

效果图:文章背景边框图→

路 过来的人说， 路是一面镜子， 它可以折射出一个人酸甜苦辣的全部。 人在旅途中， 不能不生息， 不能没有路， 每个人都在生命的路上, 独立地书写着一个属于自己的故事。     编缉:良曼

从开博的那段时间一直以来，良曼的博客文章都是采用背景加外框衬托文章内容.受到很多博友的喜欢,但一直都没有写个教程出来 ,最近也因门户改板将文章背景也都撤下了.以前来过本博的博友也来询问此代码如何设置,现良曼抽空将此文章背景边框代码填补上.

一;单纯的图片背景文章代码:

代码如下:

<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://hexun.com/homephoto/img_bak/20081121/9269439/top03-52-49.jpg);  WIDTH: 502px; PADDING-TOP: 14px; HEIGHT: 374px"><BR>
<DIV align=left>  </DIV>
<DIV>博客空间文章背景边框代码</DIV>
</DIV></DIV>

 效果图:

 

 

  

良曼博客空间文章背景边框代码

 

参数说明:

红色字为背景图片的地址,

蓝色字为文章的内容,

方法:在写日志时首先点击日志下角的"代码"将以上面的代码贴上去,注意,红色部分的"图片地址"应换成你想用的图片的链接地址,然后再点击一次"设计"将会出现你贴的图片,双击图片,你就可以在上面写日志了。

 

 

二;有多种边框的图片背景文章代码:

代码如下:

<TABLE class=" FCK__ShowTableBorders" style="WIDTH: 313px; HEIGHT: 1px" cellSpacing=8 cellPadding=0 width=313 background=http://image15.360doc.com/DownloadImg/2010/09/2423/5516850_6.jpg>
<TBODY>
<TR>
<TD align=middle width="100%">
<DIV> </DIV>
<DIV>
<TABLE style="WIDTH: 313px; HEIGHT: 58px" cellSpacing=8 borderColorDark=#66ccff cellPadding=0 width=313 borderColorLight=#66ccff background=http://image15.360doc.com/DownloadImg/2010/09/2423/5516850_7.jpg border=5>
<TBODY>
<TR>
<TD align=middle width="100%">
<DIV>博客空间文章背景代码<A href="http://wwwlm.photo.hexun.com/15085384_d.html" target=_blank></DIV></A></TD></TR></TBODY></TABLE><A href="http://hexun.com/wwwlm"></A></DIV></TD></TR></TBODY></TABLE>

 

效果图:

良曼博客空间文章背景代码

 

参数说明:

红色字为背景图片的地址,

蓝色字为文章的内容,

方法:在写日志时首先点击日志下角的"代码"将以上面的代码贴上去,注意,红色部分的"图片地址"应换成你想用的图片的链接地址,然后再点击一次"设计"将会出现你贴的图片,双击图片,你就可以在上面写日志了。

 

良曼在推荐几种用代码来营造出多种不同的边框效果.

不知博友们有没有注意在上面的代码里面我特意用加粗来标明的字母style这个字母只要将下面的代码放在 style=" 后面就可以有如下面效果的边框物效.

1、嵌入框

代码：

BORDER-RIGHT: #ff9900 15px inset; BORDER-TOP: #ff9900 15px inset; BORDER-LEFT: #ff9900 15px inset; BORDER-BOTTOM: #ff9900 15px inset

 

 

2、双线框

代码：

 BORDER-RIGHT: 7px double; BORDER-TOP: 7px double; BORDER-LEFT: 7px double; BORDER-BOTTOM: 7px double

 

3、虚线框

代码：

BORDER-RIGHT: #990000 3px dashed; BORDER-TOP: #990000 3px dashed; BORDER-LEFT: #990000 3px dashed; BORDER-BOTTOM: #990000 3px dashed

 

4、脊状框

代码：

 BORDER-RIGHT: #cc6666 15px groove; BORDER-TOP: #cc6666 15px groove; BORDER-LEFT: #cc6666 15px groove; BORDER-BOTTOM: #cc6666 15px groove

 

 5、粒状阴影框

 

代码：

 FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30