CSS怎么修改滚动条样式

电脑:win7 , 64位
开辟东西:HBuilder X方式/
1打开网页开辟东西 , 新建一个HTML文件

CSS怎么修改滚动条样式



2添加填充内容让页面呈现滚动条(这一步是为了便利给大师演示!)

CSS怎么修改滚动条样式



3编写滚动条样式:
body::-webkit-scrollbar{
width:10px;
}
body::-webkit-scrollbar-track{
background: #999;
border-radius:2px;
}
body::-webkit-scrollbar-thumb{
background: red;
border-radius:10px;
}
body::-webkit-scrollbar-thumb:hover{
background: #333;
}
body::-webkit-scrollbar-corner{
background: #179a16;
}

CSS怎么修改滚动条样式



4打开浏览器预览结果:

CSS怎么修改滚动条样式



5滚动条参数申明:
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-button
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-corner
【CSS怎么修改滚动条样式】 ::-webkit-resizer

CSS怎么修改滚动条样式




以上内容就是CSS怎么修改滚动条样式的内容啦 , 希望对你有所帮助哦!

    猜你喜欢