学习设计滚动条框高级样式代码】
带背景样式
<TABLE style="BORDER-RIGHT: #222222 2px dotted; BORDER-TOP: #222222 2px dotted; BORDER-LEFT: #222222 2px dotted; BORDER-BOTTOM: #222222 2px dotted" cellSpacing=3 borderColorDark=#222222 cellPadding=0 width=200 align=center bgColor=#222222 borderColorLight=#111111 border=1>
<TBODY>
<TR>
<TD background=http://image40.360doc.com/DownloadImg/2011/10/2013/18624557_1.gif>
<DIV style="SCROLLBAR-FACE-COLOR: #222222; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #222222; OVERFLOW: scroll; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #111111; COLOR: #222222; SCROLLBAR-3DLIGHT-COLOR: #111111; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #eeeeee; SCROLLBAR-TRACK-COLOR: #111111; SCROLLBAR-DARKSHADOW-COLOR: #222222; HEIGHT: 320px" align=center><FONT color=#808080 size=2>内容</FONT></DIV></TD></TR></TBODY></TABLE>
<TABLE style="BORDER-RIGHT: #800000 1px dashed; BORDER-TOP: #800000 1px dashed; BORDER-LEFT: #800000 1px dashed; BORDER-BOTTOM: #800000 1px dashed" cellSpacing=3 borderColorDark=#800000 cellPadding=0 width=200 align=center bgColor=#800000 borderColorLight=#500000 border=1>
<TBODY>
<TR>
<TD background=http://image40.360doc.com/DownloadImg/2011/10/2013/18624557_2.gif>
<DIV style="SCROLLBAR-FACE-COLOR: #800000; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #800000; OVERFLOW: scroll; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #600000; COLOR: #008000; SCROLLBAR-3DLIGHT-COLOR: #600000; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #fff000; SCROLLBAR-TRACK-COLOR: #600000; SCROLLBAR-DARKSHADOW-COLOR: #800000; HEIGHT: 320px" align=center><FONT color=#808080 size=2>内容</FONT></DIV></TD></TR></TBODY></TABLE>
双标题栏样式
栏目标题
<TABLE style="BORDER-RIGHT: #008000 3px dashed; BORDER-TOP: #00aa00 3px dashed; BORDER-LEFT: #008000 3px dashed; BORDER-BOTTOM: #008000 3px dashed" cellSpacing=3 borderColorDark=#008000 cellPadding=0 width=200 align=center bgColor=#008000 borderColorLight=#00cc00 border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#003000 borderColorDark=#00cc00 height=27><FONT color=#000000 size=2><STRONG>栏目标题</STRONG></FONT></TD></TR>
<TR>
<TD bgColor=#000000>
<DIV style="SCROLLBAR-FACE-COLOR: #008000; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #008000; OVERFLOW: scroll; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #003000; COLOR: #008000; SCROLLBAR-3DLIGHT-COLOR: #003000; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #003000; SCROLLBAR-DARKSHADOW-COLOR: #008000; HEIGHT: 293px" align=center>内容</DIV></TD></TR>
<TR align=middle>
<TD borderColorLight=#003000 borderColorDark=#00cc00 height=27><FONT color=#000000 size=2><STRONG>栏目标题</STRONG></FONT></TD></TR></TBODY></TABLE>
栏目标题
单标题栏样式
栏目标题
<TABLE style="BORDER-RIGHT: #0000ff 3px double; BORDER-TOP: #0000ff 3px double; BORDER-LEFT: #0000ff 3px double; BORDER-BOTTOM: #0000ff 3px double" cellSpacing=3 borderColorDark=#0000ff cellPadding=0 width=200 align=center bgColor=#0000ff borderColorLight=#0000a0 border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000080 borderColorDark=#0000a0 height=27><FONT color=#000000 size=2><STRONG>栏目标题</STRONG></FONT></TD></TR>
<TR>
<TD bgColor=#000000>
<DIV style="SCROLLBAR-FACE-COLOR: #0000ff; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #0000ff; OVERFLOW: scroll; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #000080; COLOR: #0000ff; SCROLLBAR-3DLIGHT-COLOR: #000080; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #fff000; SCROLLBAR-TRACK-COLOR: #000080; SCROLLBAR-DARKSHADOW-COLOR: #0000ff; HEIGHT: 320px" align=center>内容</DIV></TD></TR></TBODY></TABLE>
邮票边缘样式
<TABLE style="BORDER-RIGHT: #dddddd 3px dashed; BORDER-TOP: #dddddd 3px dashed; BORDER-LEFT: #dddddd 3px dashed; BORDER-BOTTOM: #dddddd 3px dashed" cellSpacing=3 borderColorDark=#dddddd cellPadding=0 width=200 align=center bgColor=#dddddd borderColorLight=#aaaaaa border=1>
<TBODY>
<TR>
<TD bgColor=#000000>
<DIV style="SCROLLBAR-FACE-COLOR: #dddddd; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #aaaaaa; OVERFLOW: scroll; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #aaaaaa; COLOR: #dddddd; SCROLLBAR-3DLIGHT-COLOR: #dddddd; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #ff0000; SCROLLBAR-TRACK-COLOR: #dddddd; SCROLLBAR-DARKSHADOW-COLOR: #dddddd; HEIGHT: 320px" align=center>内容</DIV></TD></TR></TBODY></TABLE>
虚线边缘样式
<DIV style="BORDER-RIGHT: #00aa00 1px dotted; BORDER-TOP: #00aa00 5px dotted; SCROLLBAR-FACE-COLOR: #008000; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #008000; OVERFLOW: scroll; BORDER-LEFT: #00aa00 5px dotted; WIDTH: 200px; COLOR: #008000; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #008000; BORDER-BOTTOM: #00aa00 5px dotted; SCROLLBAR-DARKSHADOW-COLOR: #008000; HEIGHT: 320px" align=center>内容</DIV>
虚线边缘样式
<DIV style="BORDER-RIGHT: #ffff00 1px dashed; BORDER-TOP: #ffff00 1px dashed; SCROLLBAR-FACE-COLOR: #ffff00; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #ffff00; OVERFLOW: scroll; BORDER-LEFT: #ffff00 1px dashed; WIDTH: 200px; COLOR: #ffff00; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #ffff00; BORDER-BOTTOM: #ffff00 1px dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffff00; HEIGHT: 320px" align=center>内容</DIV>
双线边缘样式
<DIV style="BORDER-RIGHT: #8000ff 3px double; BORDER-TOP: #8000ff 3px double; SCROLLBAR-FACE-COLOR: #8000ff; OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #8000ff; OVERFLOW: scroll; BORDER-LEFT: #8000ff 3px double; WIDTH: 200px; COLOR: #8000ff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #8000ff; BORDER-BOTTOM: #8000ff 3px double; SCROLLBAR-DARKSHADOW-COLOR: #8000ff; HEIGHT: 320px" align=center>内容</DIV>
滚动条框代码注释详解
align=center 文本框中文字的对齐方式，可用center/left/right分别对应中/左/右
WIDTH: 300px; 宽度300像素
HEIGHT: 150px; 高度150像素
OVERFLOW: auto; 超出范围时使用滚动条（auto可用scroll代替。用auto会自动适应，即文本的宽或高超出预设的的值，才会出现横或竖 滚动条；而用scroll则无论如何都会出现横竖滚动条。一般用auto会比较美观）
COLOR: #000000; 框内文本颜色（当然这是默认值，如果文本设置了其他颜色则会显示相应的颜色）
BACKGROUND-COLOR: #CCCCCC; 背景色,如果要用透明背景就不写这一句
SCROLLBAR-FACE-COLOR: #00FF00; 滚动条中间可以拉的部分和箭头旁边部分的颜色
SCROLLBAR-TRACK-COLOR: #00FFFF; 滚动条中间可以拉的部分以外的颜色
SCROLLBAR-ARROW-COLOR: #FFFF00; //箭头部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #0000FF; 竖滚动条左侧边框和横滚动条上侧的颜色（用于显示立体之用）
SCROLLBAR-3DLIGHT-COLOR: #0000FF; 竖滚动条左侧边框和横滚动条上侧的颜色（用于显示立体之用）
SCROLLBAR-SHADOW-COLOR: #0000FF; 竖滚动条右侧边框和横滚动条下侧的颜色（用于显示阴影之用）
SCROLLBAR-DARKSHADOW-COLOR: #0000FF; 竖滚动条右侧边框和横滚动条下侧的颜色（用于显示阴影之用）
BORDER-TOP: red 2px solid;
BORDER-BOTTOM: red 2px solid;
BORDER-LEFT: red 2px solid;
BORDER-RIGHT: red 2px solid;
分别表示文本框的上、下、左、右边框的颜色（可用16进制数值表示）、粗细和状态（solid表示实线，可选的值有dashed表示虚线，double表示双线，outset表示外凸）。还有可以直接使用 border: red solid 2px 来整体定义边框。
OVERFLOW-X: Hidden; 强制隐藏X轴滚动条
OVERFLOW-Y: Hidden; 强制隐藏Y轴滚动条
金钥匙博客
