自定义滚动条的设置

 1 /*css主要部分的样式*/
 2 /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
 3  
 4 ::-webkit-scrollbar {
 5   width: 10px; /*对垂直流动条有效*/
 6   height: 10px; /*对水平流动条有效*/
 7 }
 8  
 9 /*定义滚动条的轨道颜色、内阴影及圆角*/
10 ::-webkit-scrollbar-track{
11   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
12    background-color: rosybrown;
13    border-radius: 3px;
14 }
15  
16  
17  /*定义滑块颜色、内阴影及圆角*/
18  ::-webkit-scrollbar-thumb{
19             border-radius: 7px;
20             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
21             background-color: #E8E8E8;
22         }
23  
24         /*定义两端按钮的样式*/
25         ::-webkit-scrollbar-button {
26             background-color:cyan;
27         }
28  
29         /*定义右下角汇合处的样式*/
30        ::-webkit-scrollbar-corner {
31             background:khaki;
32         }

猜你喜欢

转载自www.cnblogs.com/mitusir/p/10237193.html