当前位置:首页 » HTML/CSS

自定义滚动条样式

2018-02-03 16:01 本站整理 浏览(25)

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/

*::-webkit-scrollbar {

width: 5px;

height: 5px;

background-color: #f2f2f2;

}

/*滚动条的轨道,内阴影及圆角*/

*::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

border-radius: 5px;

background-color: #f2f2f2;

}

/*滑块,内阴影及圆角*/

*::-webkit-scrollbar-thumb {

/*width: 10px;*/

height: 20px;

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: #c2c2c2;

}