CSS中怎么設(shè)置滾動(dòng)條樣式

CSS中怎么設(shè)置滾動(dòng)條樣式，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

　　CSS設(shè)置滾動(dòng)條代碼如下：

　　<divclass="inner">

　　<divclass="innerbox">

　　<p>這是內(nèi)容111</p>

　　<p>這里是內(nèi)容222</p>

　　<p>這里是內(nèi)容333</p>

　　</div>

　　</div>

　　.inner{

　　width:265px;

　　height:400px;

　　position:absolute;

　　top:33px;

　　left:13px;/*cursor:pointer;*/

　　overflow:hidden;

　　}

　　.innerbox{

　　overflow-x:hidden;

　　overflow-y:auto;

　　color:#000;

　　font-size:.7rem;

　　font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma;

　　height:100%;

　　}/*滾動(dòng)條樣式*/

　　.innerbox::-webkit-scrollbar{/*滾動(dòng)條整體樣式*/

　　width:4px;/*高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/

　　height:4px;

　　}

　　.innerbox::-webkit-scrollbar-thumb{/*滾動(dòng)條里面小方塊*/

　　border-radius:5px;

　　webkit下面的CSS設(shè)置滾動(dòng)條

　　主要有下面7個(gè)屬性

　　::-webkit-scrollbar滾動(dòng)條整體部分，可以設(shè)置寬度啥的

　　::-webkit-scrollbar-button滾動(dòng)條兩端的按鈕

　　::-webkit-scrollbar-track外層軌道

　　::-webkit-scrollbar-track-piece內(nèi)層滾動(dòng)槽

　　::-webkit-scrollbar-thumb滾動(dòng)的滑塊

　　::-webkit-scrollbar-corner邊角

　　::-webkit-resizer定義右下角拖動(dòng)塊的樣式

看完上述內(nèi)容，你們掌握CSS中怎么設(shè)置滾動(dòng)條樣式的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！