webkit滚动条样式

::-webkit-scrollbar { width: 3px; height: 3px;}
/*width:纵向滚动条的宽度；height：横向滚动条的高度；*/
::-webkit-scrollbar-track-piece { background-color: #000;-webkit-border-radius: 6px;}
/*滚动条样式底部导轨样式;可设置（背景）颜色和圆角半径*/
::-webkit-scrollbar-thumb{background-color: #999; -webkit-border-radius: 6px;}
/*滚动条滑块样式;*/
::-webkit-scrollbar-thumb:vertical{}/*纵向滚动条滑块样式;*/
::-webkit-scrollbar-thumb:horizontal{}/*横向滚动条滑块样式;*/

可以发现webkit的滚动条设置很简单
对比一下IE的：

Body {
    scrollbar-base-color:#3ff;  /*滚动条的大体颜色（各种被覆盖）*/
    scrollbar-highlight-color: #00f;  /*滚动条空白部分颜色（被滚动条导轨颜色覆盖）*/
    scrollbar-track-color: #000;  /*滚动条导轨颜色*/
    scrollbar-arrow-color: #f4ae21;  /*滚动条两端箭头颜色*/
    scrollbar-face-color: #f00;  /*滚动条表面颜色*/    
    scrollbar-shadow-color: #f3f;  /*滚动条边缘颜色*/

    scrollbar-darkshadow-color: #ff0;  /*看不出这个设置作用在哪*/
    scrollbar-3dlight-color: #0f0;  /*看不出这个设置作用在哪*/
}

没找到设置滚动条粗细的，这可是最最需要的功能了，圆角也没有，颜色倒是很详细。。。结果就是设了也没啥意思

本来也顺手查了下Firefox的滚动条设置的，结果没效果？可能是我不会弄吧。。。

@-moz-document url-prefix() {
    /* 滚动条颜色 */
    scrollbar {
        -moz-appearance: none !important;
        background: rgb(0,255,0) !important;
    }
    /* 滚动条按钮颜色 */
    thumb,scrollbarbutton {
        -moz-appearance: none !important;
        background-color: rgb(0,0,255) !important;
    }
    /* 鼠标悬停时按钮颜色 */

    thumb:hover,scrollbarbutton:hover {
        -moz-appearance: none !important;
        background-color: rgb(255,0,0) !important;
    }
    /* 隐藏上下箭头 */
    scrollbarbutton {
        display: none !important;
    }
    /* 纵向滚动条宽度 */
    scrollbar[orient="vertical"] {
        min-width: 15px !important;
    }
}