CSS如何修改默认滚动条样式

代码如下：

 

　　<divclass="inner">

 

　　<divclass="innerbox">

 

　　<pstyle="height:200px;">这是内容111</p>

 

　　<pstyle="height:400px;">这里是内容222</p>

 

　　<p>这里是内容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%;

 

　　}/*滚动条样式*/

 

　　.innerbox::-webkit-scrollbar{/*滚动条整体样式*/

 

　　width:4px;/*高宽分别对应横竖滚动条的尺寸*/

 

　　height:4px;

 

　　}

 

　　.innerbox::-webkit-scrollbar-thumb{/*滚动条里面小方块*/

 

　　border-radius:5px;

 

　　-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);

 

　　background:rgba(0,0,0,0.2);

 

　　}

 

　　.innerbox::-webkit-scrollbar-track{/*滚动条里面轨道*/

 

　　-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);

 

　　border-radius:0;

 

　　background:rgba(0,0,0,0.1);

 

　　}

 

转载：http://www.divcss5.com/css3-style/c54508.shtml

来源：https://www.cnblogs.com/BluceLee/p/12658899.html