各种少见的边框代码

 

 

 

¤彩色边框¤

 

<div STYLE="border-style:solid;border-width:5pt; border-color:blue">日志文字</div>

<DIV style="BORDER-RIGHT: #ddcc00 2px solid; BORDER-TOP: #00ccdd 2px solid; BORDER-LEFT: #ffee99 2px solid; BORDER-BOTTOM: #336699 2px solid; BACKGROUND-COLOR: #ccffcc">日志文字</DIV>

¤双线框¤

<div STYLE="border-style:Double;border-width:5pt; border-color: #f0e68c">

<div style="width:100%;height:100%;background-color:#66cdaa">日志文字</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:#f0e8cd">日志文字</div></div>

¤滚动文本框¤

 

 

<DIV align=left

style='

color: #336699;

background-color:#dcdcdc;

border: solid 3px blue;

width: 450px;

height: 150px;

overflow: scroll;

scrollbar-face-color: #ffd700;

scrollbar-shadow-color: #e0ffff;

scrollbar-highlight-color: #fa8072;

scrollbar-3dlight-color: #ff0000;

scrollbar-darkshadow-color: #afeeee;

scrollbar-track-color: #ffb6c1;

scrollbar-arrow-color: #e6e6fa;

'>日志文字</DIV>

 

¤实线双线外凸虚线¤

 

<div style="border: 1px dashed #000000;background-color:#FFFFE0">日志文字</div>

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