利用CSS美化,自定义滚动条样式,CSS代码分享

前端开发   发布日期:2023年05月24日   浏览次数:355

利用CSS美化,自定义滚动条样式,纯代码分享。flpm_box_danwei 为容器的ID,根据需要自行修改。

<style>
#flpm_box_danwei::-webkit-scrollbar,#right_box::-webkit-scrollbar {
/*滚动条整体样式*/
width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
#flpm_box_danwei::-webkit-scrollbar-thumb,#right_box::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px;
box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
background   : #ccc
}
#flpm_box_danwei::-webkit-scrollbar-track,#right_box::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background   : #ededed;
}
</style>


以上就是利用CSS美化,自定义滚动条样式,CSS代码分享的详细内容,更多关于利用CSS美化,自定义滚动条样式,CSS代码分享的资料请关注九品源码其它相关文章!