分享

日志边框代码

 拾遗斋296 2015-12-16
 
 
 

 
           一、单线框代码如下:
          <DIV style="BORDER-RIGHT: #ff0000 3px solid;
             BORDER-TOP: #ff0000 3px solid;
             BORDER-LEFT: #ff0000 3px solid;
             BORDER-BOTTOM: #ff0000 3px solid">文字内容</div>
 

        二、双线框代码如下:
           <DIV style="BORDER-RIGHT: red 5px double;
              BORDER-TOP: red 5px double;
              BORDER-LEFT: red 5px double;
              BORDER-BOTTOM: red 5px double">文字内容</div>

       说明:double--双线;rad--红色。

 
三、凸出框代码如下
<DIV style="BORDER-RIGHT: #ff88ff 25px outset;
BORDER-TOP: #ff88ff 25px outset;
BORDER-LEFT: #ff88ff 25px outset;
BORDER-BOTTOM: #ff88ff 25px outset">文字内容</div>

 
四、邮票框代码如下:
<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed;
BORDER-TOP: #f6ae56 3px dashed;
BORDER-LEFT: #f6ae56 3px dashed;
BORDER-BOTTOM: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56><TBODY><TR><TD Align=center align=middle bgColor=#aeffae>文字内容</div></TD></TR></TBODY></TABLE>

 
五:虚线框代码如下:
<DIV style="BORDER-RIGHT: #ff0000 4px dashed;
BORDER-TOP: #ff0000 4px dashed;
BORDER-LEFT: #ff0000 4px dashed;
BORDER-BOTTOM: #ff0000 4px dashed">文字内容</div>

 
六:凹槽框代码如下:
<DIV style="BORDER-RIGHT: red 25px groove;
BORDER-TOP: red 25px groove;
BORDER-LEFT: red 25px groove;
BORDER-BOTTOM: red 25px groove">文字内容</div>

 
七、实线代码:
<div style="border:3px solid #f990033;">文字内容</div>

 
八、外凸代码:
<div style="border-style:outset; border-width:5px;">文字内容</div> 

 
九、带背景色的简单双线框 :
<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

 
十、带背景色的浮出立体线框 :
<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>


 
信纸式虚线代码
<hr style="border:1px dashed red; height:1px">

 1.上面的代码表示一条虚线,你想要多少就复制多少就可以了。

2.代码中的的border:1px ,height:1px是来控制虚线的大小的,根据需要自己来修改那两个数字。

3.代码中的red表示虚线的颜色,可以自己修改。

 

 
 
 
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约