MSN Spaces单线框代码

来源： 作者： 时间：2006-10-15 Tag： 点击：

女巫根据Loadmemory的教程修改润色后的背景边框代码：

对于背景边框的四个边你也可以按自己的需要进行调整，以左边框为例，你可以使用下述语法：

Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式
Border-left-color: #xxxxxx定制边框颜色
Border-left-width: xpt 定制边框粗细

其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下，看一看是什么效果：（效果这里就不给出来了，有兴趣的可以回去试一下。）

你可以按照自己的想法随意调整四个边框的式样，以便创造与众不同的效果，记住一点，不同的属性描述之间用 ; 隔开。另外，你可能会注意到，当你设置完边框返回到日志文本编辑模式，在键入文字过程中如果使用回车键，就会又出现一个边框，从而影响文字的连贯性，这是因为HTML语法中不支持硬回车。要解决这个问题，必须返回到HTML编辑模式，在需要回车的地方键入<br>，需要几次回车就键入几个<br>，然后再返回到文本编辑模式，你就会发现边框背景内已经为你加入了回车后的效果。

女巫根据国良先生的教程修改后配色的线框代码，效果如下： <div style="border: 1px dashed #f08080;background-color:#ffdab9">文字</div>

效果是框线颜色为淡珊瑚色#f08080，宽度为1，背景色为桃色#ffdab9的虚线框。

<div style="border: 3px dashed #ff4500;background-color:#ffdab9">文字</div>

效果是框线颜色为橙红色#ff4500，宽度为3，背景色为桃色#ffdab9的虚线框。

<div style="border: 3px dashed #f08080;background-color:#FFFFE0">文字</div>

效果是框线颜色为淡珊瑚色#f08080，宽度为3，背景色为淡黄色#FFFFE0的虚线框。

效果是框线宽度为3颜色为桃色#ffdab9，背景色为淡黄色#FFFFE0的实线框。

背景色为淡黄色的外凸效果

延伸代码：

<div style="border:1px solid #000000;">实线</div>

<div style="border-style:outset; border-width:1px;">外凸</div>

<div style="border:3px double #000000;">双线</div>

<div style="border:1px dashed #000000;">虚线</div>

　　单线框加背景： <DIV style="BORDER-RIGHT: #4169e1 10px dashed; BORDER-TOP: #4169e1 10px dashed; BORDER-LEFT: #4169e1 10px dashed; BORDER-BOTTOM: #4169e1 10px dashed; BACKGROUND-COLOR: #e0ffff">　　日志文字　</DIV>　

小绿人的绿色粗框代码：

小绿人黄色粗框

代码：

<DIV style="BORDER-RIGHT: #ffcc00 3px dotted; BORDER-TOP: #ffcc00 3px dotted; BORDER-LEFT: #ffcc00 3px dotted; BORDER-BOTTOM: #ffcc00 3px dotted">
<DIV style="BORDER-RIGHT: #ffcc00 3px dotted; BORDER-TOP: #ffcc00 3px dotted; BORDER-LEFT: #ffcc00 3px dotted; BORDER-BOTTOM: #ffcc00 3px dotted">
<DIV style="BORDER-RIGHT: #ffcc00 3px dotted; BORDER-TOP: #ffcc00 3px dotted; BORDER-LEFT: #ffcc00 3px dotted; BORDER-BOTTOM: #ffcc00 3px dotted">
<DIV style="BORDER-RIGHT: #ffcc00 3px dotted; BORDER-TOP: #ffcc00 3px dotted; BORDER-LEFT: #ffcc00 3px dotted; BORDER-BOTTOM: #ffcc00 3px dotted"><FONT color=#ff9900 size=6>  </FONT><FONT color=#fcfbfa></FONT><FONT color=#ff9900 size=6> </FONT>  <FONT color=#333333>                      <BR></FONT><FONT color=#333333><FONT color=#ff9900>小绿人黄色粗框<BR></FONT> 
<DIV align=center>
<DIV style="BORDER-RIGHT: #f0c378 2pt dashed; BORDER-TOP: #f0c378 2pt dashed; SCROLLBAR-FACE-COLOR: #ffffb4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0c378 2pt dashed; WIDTH: 347px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0c378 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #999999; HEIGHT: 107px; BACKGROUND-COLOR: #ffffb4">
<P align=left><FONT color=#ff9900>代码：</FONT></P></DIV></DIV>                            </FONT><FONT color=#6699ff>                </FONT><BR>　</DIV></DIV></DIV></DIV>

以下为女巫改良后的单线框代码（回车后不会改变）：

代码：

<DIV style="BORDER-RIGHT: #f08080 1px dashed; BORDER-TOP: #f08080 1px dashed; BORDER-LEFT: #f08080 1px dashed; BORDER-BOTTOM: #f08080 1px dashed;

BACKGROUND-COLOR: #ffdab9" align=center>
<DIV align=left>文字</DIV></DIV>

代码：

<DIV style="BORDER-RIGHT: #f08080 3px dashed; BORDER-TOP: #f08080 3px dashed;

BORDER-LEFT: #f08080 3px dashed; BORDER-BOTTOM: #f08080 3px dashed; BACKGROUND-COLOR: #ffdab9" align=center>
<DIV align=left>文字</DIV></DIV>

代码：

<DIV style="BORDER-RIGHT: #4169e1 5px dashed; BORDER-TOP: #4169e1 5px dashed;

BORDER-LEFT: #4169e1 5px dashed; BORDER-BOTTOM: #4169e1 5px dashed; BACKGROUND-COLOR: #e0ffff" align=center>
<DIV align=left>文字</DIV></DIV>

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

<DIV class=content style="BORDER-RIGHT: #ffcccc 5px dashed; BORDER-TOP: #ffdddd 5px dashed;

BORDER-LEFT: #ffdddd 5px dashed; BORDER-BOTTOM: #ffdddd 5px dashed; BACKGROUND-COLOR:

#fffacd" align=center>
<DIV align=left>文字</DIV></DIV>

<DIV class=content style="BORDER-RIGHT: #ffe4c4 5px dashed; BORDER-TOP: #ffe4c4 5px dashed;

BORDER-LEFT: #ffe4c4 5px dashed; BORDER-BOTTOM: #ffe4c4 5px dashed; BACKGROUND-COLOR:

#fffacd" align=center>
<DIV align=left>文字</DIV></DIV>

<DIV class=content style="BORDER-RIGHT: #ffd6da 5px dashed; BORDER-TOP: #ffd6da 5px dashed;

BORDER-LEFT: #ffd6da 5px dashed; BORDER-BOTTOM: #ffd6da 5px dashed; BACKGROUND-COLOR:

#ffe4c4" align=center>
<DIV align=left>文字</DIV></DIV>

<DIV style="BORDER-RIGHT: #ff99cc 5px dashed; BORDER-TOP: #ff99cc 5px dashed; BORDER-LEFT:

#ff99cc 5px dashed; BORDER-BOTTOM: #ff99cc 5px dashed; BACKGROUND-COLOR: #ffcccc"