今天给大家分享一个CSS圆角滚动条的设置方法,具体如下:
//滚动条样式
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track-piece {
background-color: transparent; //滚动槽
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 12px;
background-color: #BDBDBD;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 12px;
background-color: #BDBDBD;
-webkit-border-radius: 6px;
}
//滚动条鼠标移上去的样式
::-webkit-scrollbar-thumb:vertical:hover,::-webkit-scrollbar-thumb:horizontal:hover
{
background-color: #808080;
}
好啦,关于CSS圆角滚动条的分享就到这里,同学们学会了吗,更多问题可评论区留言~