WordPress-让你的滚动条更好看-知更鸟主题css美化

小笨 2020年4月27日23:25:42 发表评论 446 views

WordPress-让你的滚动条更好看-知更鸟主题css美化

趁着今天有空,更新了博客的滚动条,效果如下:

WordPress-让你的滚动条更好看-知更鸟主题css美化 WordPress-让你的滚动条更好看-知更鸟主题css美化

博客立刻变得美美哒,有木有,马上送上样式,把样式丢进外观-》自定义-》额外css里就可以啦!

body::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
body::-webkit-scrollbar-track{
    background: rgba(0, 0, 0, 0);
}
body::-webkit-scrollbar-thumb{
    background:linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    border-radius:6px;
}
body::-webkit-scrollbar-thumb:hover{
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}

遗憾的是,该样式只能适用于webkit内核的浏览器,像360浏览器、谷歌浏览器等,下面是全部样式的介绍:

::-webkit-scrollbar        滚动条整体部分
::-webkit-scrollbar-button      滚动条两端的按钮。可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track         外层轨道。可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece        内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb               滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner               边角
::-webkit-resizer                       定义右下角拖动块的样式

对应上面的样式说明,在网上找了一张十分清晰的图:

WordPress-让你的滚动条更好看-知更鸟主题css美化

 

weinxin
【微信~支付宝~QQ】打赏
如果本文对你有所帮助,请打赏~1元就足够感动我
小笨

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: