css之设置滚动条样式

将一下代码复制到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>

chrome 效果图








引用：

http://www.cnblogs.com/yokoboy/p/3354704.html
















-