[转载]基于webkit浏览器的CSS滚动条美化

更新:2018年07月01日 15:08 前端 阅读(0)
标签: @webkit @美化滚动条 #作者: 网络
基于webkit浏览器的CSS滚动条美化
::-webkit-scrollbar{
    padding-left:1px;
    border-left:1px solid #d5d5d5;
    background-color:#fafafa;
    overflow:visible;
    width:13px;
}
::-webkit-scrollbar-thumb{
    background-color:rgba(0, 0, 0, .2);
    background-clip:padding-box;
    border:1px solid transparent;
    border-left-width:2px;
    min-height:15px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb:vertical:hover{
    background-color:rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-thumb:vertical:active{
    background-color:rgba(0, 0, 0, .5);
}
::-webkit-scrollbar-button{
    height:0;
    width:0;
}
::-webkit-scrollbar-track{
    background-clip:padding-box;
    border:solid transparent;
    border-width:0 0 0 4px;
}
::-webkit-scrollbar-corner{
    background:transparent;
}

 

感谢阅读本文,若本文对你有所帮助,不妨将其推荐给好友,与好友一起分享。
文章仅做学习交流使用,若您认为文章存在侵权或不合法行为等,请及时联系我们。
文章之版权归其合法拥者所有。转载原创内容无需联系本站站长,请注明原文出处及链接。
#原文:[IT技术网] https://www.173it.cn/plus/view.php?aid=7141
更新:2018年07月01日 15:08 前端 阅读(0)
标签: @webkit @美化滚动条 #作者: 网络

阅读延伸