纯CSS实现滚动条的美化，只兼容谷歌

[css]代码库

/* 滚动条的宽度 */

::-webkit-scrollbar {

    width: 14px;

    height: 14px;

}




/*垂直方向的下按钮*/

::-webkit-scrollbar-button:vertical:increment {

    background:#D6F0FF url(/FronWeb/Images/x1204.png) no-repeat 0px 0px;

    height:15px;

}




/*横向的右边按钮*/

::-webkit-scrollbar-button:horizontal:increment {

    background:#D6F0FF url(/FronWeb/Images/y1204.png) no-repeat 2px 0px;

    width:14px;

}




/*垂直方向的上按钮*/

::-webkit-scrollbar-button:vertical:decrement {

    background:#D6F0FF url(/FronWeb/Images/s1204.png) no-repeat 1px -2px;

    height:14px;

}




/*横向的左按钮*/

 ::-webkit-scrollbar-button:horizontal:decrement {

    background:#D6F0FF url(/FronWeb/Images/z1204.png) no-repeat 1px 0px;

    width:14px;

}




/*滚动槽的颜色 */

::-webkit-scrollbar-track-piece {

   background-color:#d6f0ff;

}




/* 滑轮的颜色 */

::-webkit-scrollbar-thumb:vertical {

    height: 50px;

    background-color: #9cdbff;

    border:1px solid #7bcfff;

    border-radius:10px;

   

}

::-webkit-scrollbar-thumb:horizontal{

	 height: 50px;

    background-color: #9cdbff;

    border:1px solid #7bcfff;

    border-radius:10px;

	 }