css 自定义浏览器滚动条样式

css改变滚动条的样式

	::-webkit-scrollbar {
	    width: 8px;
	    height: 10px;
	    border-radius: 7px;
	}
	::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
	    background-color: #e2e2e2;
	}
	::-webkit-scrollbar-thumb {
	    border-radius: 7px;
	    background-color: rgba(0,0,0,.3);
	}
	::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
	    background-color: #e2e2e2;
	}

	scrollbar-arrow-color: color; 三角箭头的颜色
	scrollbar-face-color: color; 立体滚动条的颜色（包括箭头部分的背景色）
	scrollbar-3dlight-color: color; 立体滚动条亮边的颜色
	scrollbar-highlight-color: color; 滚动条的高亮颜色（左阴影？）
	scrollbar-shadow-color: color; 立体滚动条阴影的颜色
	scrollbar-darkshadow-color: color; 立体滚动条外阴影的颜色
	scrollbar-track-color: color; 立体滚动条背景颜色
	scrollbar-base-color:color; 滚动条的基色

Demo1

*{
	margin: 0;
	padding: 0;
}
#container{
	width: 100%;
	height: 1200px;
	line-height: 600px;
	text-align: center;
	background: #ccc;
}
/*定义滚动条的高宽*/
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
/*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
/*显示滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:start:decrement,
/*显示滚动条上方的渐减按钮*/
::-webkit-scrollbar-button:end:increment {
    display: block;
}
/*隐藏滚动条上方的渐增按钮*/
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}
/* 定义滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:end:increment {
    background-image: url(./images/scroll_cntrl_dwn.png);
}
/* 定义滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:start:decrement {
    background-image: url(./images/scroll_cntrl_up.png);
}
/* 垂直滚动条的第三层轨道的上段 */
::-webkit-scrollbar-track-piece:vertical:start {
    background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
    background-repeat: no-repeat, repeat-y;
}
/* 垂直滚动条的第三层轨道的下段 */
::-webkit-scrollbar-track-piece:vertical:end {
    background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
    background-repeat: no-repeat, repeat-y;
    background-position: bottom left, 0 0;
}
/* 垂直滚动条的滑动块 */
::-webkit-scrollbar-thumb:vertical {
    height: 56px;
    -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
    border-width: 8 0 8 0;
}