/* CSS Document */
一、滚动条的轨迹，记作：scrollbar-track。所谓“轨迹”，指滚动条的滑动块运行时所必经的路线。
二、滚动条的滑动块，即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块，记作：scrollbar-face。face即滚动条的“脸”，注意它有三张“脸”：滑动条和两头的小方块。
三、滚动条亮边框部分，记作：scrollbar-highlight。这个亮边框，和表格的亮边框概念是一样的，即左边和上边部分，滚动条的亮边框部分是指滚动条的“脸”（即滑动块和两头小方块）的亮边框。
四、滚动条亮边框部分的外围还有一个立体修饰部分，记作scrollbar-3dlight。3d即立体的意思，它将包围在滚动条亮边框部分的外边。
五、滚动条阴影部分，指主滑块和两头方块的阴影，位于左边和左下，记作：scrollbar-shadow。
六、滚动条阴影部分还有一个强阴影部分，记作scrollbar-darkshadow，它包围在阴影部分的外边。
七、滚动条两头方志标志箭头，记作：scrollbar-arrow，箭头方向为向下、向上、向左、向右。
呵呵，够了够了，就是还没有介绍完也应该打住了，不然你也和我一样晕了。
现在，我们已经晕乎乎地懂得了滚动条由若干部分组织，只要我们设置上述部分的颜色，当你的网页被打开，滚动条就不是Windows默认的样式了！下面是一个代码样式，请将它复制到网页代码中的<head>和</head>之间（你可根据你的需要重新设置各颜色值）：
<style type="text/css">
.myscroll{
scrollbar-face-color:red;
scrollbar-highlight-color:blue;
scrollbar-shadow-color:black;
scrollbar-3dlight-color:green;
scrollbar-arrow-color:white;
scrollbar-track-color:pink;
scrollbar-darkshadow-color:black
}
</style>
SCROLLBAR-FACE-COLOR: rgb(10,236,209); //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: rgb(23,255,155);//滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: rgb(255,116,23);//立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: rgb(66,93,127);//滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: rgb(93,232,255);//上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: rgb(255,70,130);//滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: rgb(10,0,209);//滚动条强阴影的颜
SCROLLBAR-BASE-COLOR: rgb(66,93,128)/滚动条的基本颜色iframe是不直接支持的，这个需要用在被包含的文件的body的style中。至于上边的rgb也可以用red或者#FF0000这种来代替。
滚动条代码：
<style type="text/css">
BODY{
BORDER-LEFT: #ECF1F4 7px solid;BORDER-RIGHT: #ECF1F4 7px solid;margin:0; /*控制滚动条左右侧实线颜色*/
overflow-x:hidden; /*隐藏底部的横向滚动条*/
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*滚动条强阴影颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color: #f8f8f8; /*滚动条的基本颜色*/
}
</style>
/* 滚动条样式 1 */
1、 控制横向和纵向滚动条的显隐
去掉滚动条 x 轴 <body style="overflow-y:hidden">
去掉滚动条 y 轴 <body style="overflow-x:hidden">
滚动条 x/y 轴全部去掉 <body scroll="no">
2、滚动条颜色
<style type="text/css">
BODY{
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}
</style>3、 箭行符号滚动条代码
<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>4、 一侧滚动条代码
<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>5、 朴素型滚动条代码
<style type="text/css">
<!--
BODY {
scrollbar-face-color: white;
scrollbar-highlight-color: hotpink;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>6、一侧滚动条代码
<style type="text/css">
<!--
BODY {scrollbar-face-color: white;
scrollbar-highlight-color: white;
scrollbar-shadow-color: hotpink;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: hotpink;
scrollbar-track-color: white;
scrollbar-darkshadow-color: white}
-->
</style>7、 立体型滚动条代码
<style type="text/css">
<!--
BODY {scrollbar-face-color: pink;
scrollbar-highlight-color: deeppink;
scrollbar-shadow-color: lavenderblush;
scrollbar-3dlight-color: lavenderblush;
scrollbar-arrow-color: white;
scrollbar-track-color: lavenderblush;
scrollbar-darkshadow-color: deeppink}
-->
</style>8、 滚动条样式
<style type="text/css">
<!--
BODY{
BORDER-RIGHT: #ffffff 0px solid;
BORDER-TOP: #ffffff 0px solid;
SCROLLBAR-FACE-COLOR: #dfdfdf;
FONT-SIZE: 9pt; BORDER-LEFT: #ffffff 0px solid;
SCROLLBAR-3DLIGHT-COLOR: #595959;
SCROLLBAR-ARROW-COLOR: #7f7f7f;
BORDER-BOTTOM: #ffffff 0px solid;
FONT-FAMILY: Arial, Helvetica, sans-serif;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #cfcfcf;
}
-->
</style>
9、 滚动条样式
<style type="text/css">
<!--
BODY{
SCROLLBAR-FACE-COLOR: #dff4fd;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #a8cbf1;
SCROLLBAR-ARROW-COLOR: #a8cbf1;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #a8cbf1;
SCROLLBAR-BASE-COLOR: #a8cbf1
}
-->
</style>10、 滚动条样式
<STYLE type=text/css>
BODY{
SCROLLBAR-FACE-COLOR: #e8e7e7;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #cccccc;
SCROLLBAR-ARROW-COLOR: #03B7EC;
SCROLLBAR-TRACK-COLOR: #EFEFEF;
SCROLLBAR-DARKSHADOW-COLOR: #b2b2b2;
SCROLLBAR-BASE-COLOR: #000000;
}
</STYLE>
0条大神的评论