1. 首頁 > 生活百科 > >

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怎么修改滾動條樣式的內容啦 ， 希望對你有所幫助哦！

    猜你喜歡