明辉站/网站教程/内容

html中对于div滚动条样式设计的案例

网站教程2023-12-29 阅读
[摘要]html中关于div滚动条样式设计的实例::-webkit-scrollbar-track-piece{background-color:#fff;/*滚动条的背景颜色*/-webkit-border-radius:0;/*滚动条的圆角宽度*/}::-webkit-scrollbar{width:...
html中关于div滚动条样式设计的实例

::-webkit-scrollbar-track-piece{
background-color:#fff;/*滚动条的背景颜色*/
-webkit-border-radius:0;/*滚动条的圆角宽度*/
}
::-webkit-scrollbar{
width:8px;/*滚动条的宽度*/
height:8px;/*滚动条的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直滚动条的样式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border:2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{/*滚动条的hover样式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平滚动条的样式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}
div::-webkit-scrollbar{
    width:8px;/*滚动条的宽度*/
  }

通过该种方式设计div的滚动条样式。

以上就是html中关于div滚动条样式设计的实例的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读