CSS 个性化滚动条样式

页面中有许多内容过多时，为了不影响整体布局，总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊，怎么办，当然作为界面的化妆师CSS就出手啦~

滚动条样式由多个伪类组成 下面是我的小栗子

::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}

/* 滚动槽 */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(33,68,124,1);
	border-radius: 10px;
	background: #021b49;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background: #013b8e;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #013b8e;
}
/* 边角 即两个滚动条的交汇处 */
::-webkit-scrollbar-corner{
	background: #021b49;
	border-radius: 10px;
}
/* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件*/
::-webkit-resizer{
}

效果图