将一下代码复制到html页面中即可查看效果。
支持IE和chrome,不支持firefox
[size=x-large][color=green][b] chrome 效果图[/b][/color][/size]
[img]http://dl2.iteye.com/upload/attachment/0095/8802/c7702eed-3b49-3c3e-a64c-f849d23faa82.png[/img]
引用:
http://www.cnblogs.com/yokoboy/p/3354704.html
-
支持IE和chrome,不支持firefox
<style type="text/css">
/*ie滚动条样式*/
* {
scrollbar-arrow-color: rgb(200,200,200);/*ok-上下三角箭头*/
scrollbar-3dlight-color: rgb(200,200,200);/*ok-3d滑块左上角高光部分颜色*/
scrollbar-highlight-color: rgb(200,200,200);/*ok-滑块左上角高光部分颜色*/
scrollbar-shadow-color: rgb(200,200,200);/*ok*/
scrollbar-darkshadow-color: rgb(200,200,200);/*ok-以上都是定义一些阴影高光等3D效果*/
scrollbar-face-color: rgb(200,200,200);/*ok-滑块*/
scrollbar-track-color: rgb(240,240,240);/*ok-滑道*/
}
/*chrome滚动条样式*/
::-webkit-scrollbar {/*滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。*/
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {/*滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/
display: none;
}
::-webkit-scrollbar-track {/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/
display: none;
}
::-webkit-scrollbar-track-piece {/*内层轨道,滚动条中间部分(除去)。*/
background: rgb(240,240,240);
}
::-webkit-scrollbar-thumb {/*滚动条里面可以拖动的那部分*/
background: rgb(200,200,200);
}
::-webkit-scrollbar-thumb:hover {/*滚动条里面可以拖动的那部分*/
background: rgb(180,180,180);
}
::-webkit-scrollbar-corner {/*边角*/
background: rgb(200,200,200);
}
::-webkit-scrollbar-resizer {/*定义右下角拖动块的样式*/
background: rgb(200,200,200);
}
</style>
[size=x-large][color=green][b] chrome 效果图[/b][/color][/size]
[img]http://dl2.iteye.com/upload/attachment/0095/8802/c7702eed-3b49-3c3e-a64c-f849d23faa82.png[/img]
引用:
http://www.cnblogs.com/yokoboy/p/3354704.html
-