『转贴并整理』各种边框代码(一) -- Welcome to my Material Space!

[『精美边框*表格』]『转贴并整理』各种边框代码(一)

摩羯天使发布于 2006-10-26 21:55

Tags: 时尚 it

¤彩色边框¤

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

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

¤滚动文本框¤

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

单边框效果 ：

代码：

<center><img src="图片地址" style="border:3 solid #ff0000"></center>

————————————————————————————————————————

双边框效果

代码：

<center><img src="图片地址" style="border:5 double green"></center>

————————————————————————————————————————

立体镜框（一）效果

代码：<center><img src="图片地址" style="border:25 outset #ff88ff"></center>

————————————————————————————————————————

立体镜框（二）效果

代码：
<center><img src="图片地址" style="border:25 inset #ff88ff"></center>

————————————————————————————————————————

虚线框

代码：
<center> <img src="图片地址" style="border:4 dashed #ff0000"></center>

————————————————————————————————————————



摩羯天使制作



摩羯天使制作



发表评论

昵称

主页

标题

内容

算式的解
看不清校验算式？

发表评论
昵称
主页
标题
内容
算式的解	看不清校验算式？