美化滚动条样式

Posted 博仔show

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了美化滚动条样式相关的知识,希望对你有一定的参考价值。

大家好,最近项目里用到美化浏览器滚动条样式,我也总结一下,分析给大家,挺好用的哦

::-webkit-scrollbar {
width: 14px;
height: 14px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
}

::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
}

::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
}

::-webkit-scrollbar-corner {
background: transparent;
}
 
 

 


 

 
 

以上是关于美化滚动条样式的主要内容,如果未能解决你的问题,请参考以下文章

css3滚动条样式及美化方法

QScrollArea qss样式表,美化滚动条

QScrollArea qss样式表,美化滚动条

CSS滚动条实现步骤及美化小技巧

Qt 自定义 滚动条 样式

Qt 自定义 滚动条 样式(模仿QQ)