CSS3定制滚动条样式 webkit

 1 /* 滚动条整体样式外部 滚动条宽度和高度分别代表横竖滚动条的宽度和高度*/
 2 *::-webkit-scrollbar {
 3     width: 6px;
 4     height: 6px
 5 }
 6 /* 滚动条里面的上下箭头按钮,允许通过点击微调滚动条的位置 一般隐藏*/
 7 *::-webkit-scrollbar-button {
 8     width: 0;
 9     height: 0;
10     display: none
11 }
12 /* 滚动条横竖滚动条交汇样式 一般设置透明*/
13 *::-webkit-scrollbar-corner {
14     background-color: transparent
15 }
16 /* 滚动条内部 */
17 *::-webkit-scrollbar-thumb {
18     background-color: rgba(0,0,0,0.3);
19     border-radius: 10px;
20     -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1)
21 }
22 /* 滚动条内部 鼠标经过样式*/
23 *::-webkit-scrollbar-thumb:hover {
24     background-color: rgba(0,0,0,0.5);
25     border-radius: 10px;
26     -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1)
27 }
28 /* 滚动条轨道 设置透明*/
29 *::-webkit-scrollbar-track {
30     border-radius: 10px;
31     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0)
32 }
33 /* 滚动条轨道 设置透明*/
34 *::-webkit-scrollbar-track-piece {
35 
36 }
37 
38 
39 *::-webkit-resizer {
40     
41 }