WordPress默认的浏览器侧边栏滚动条是非常丑陋的,当然,有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化,有些WordPress主题是没有美化侧边滚动栏的,那么这时就需要我们去美化啦!村少今天就教大家如何自定义美化侧边滚动栏。其实非常简单,只需一句代码的事情就可以自定义美化WordPress侧边滚动栏,并且代码适用于绝大多数WordPress主题。
美化教程
一般主题都会自带 自定义代码 这样主题设置的,只需在主题设置自定义CSS代码里面添加美化的css代码就即可美化啦!
如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码就即可美!
单色滚动条代码:
/*滚动条显示样式*/ ::-webkit-scrollbar-thumb{ background-color:#FF6666; /*更改喜欢的十六进制颜色*/ height:50px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:4px; border: 2px solid #fff; } /*滚动条大小*/ ::-webkit-scrollbar{ width:8px; height:8px; } /*滚动框背景样式*/ ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border-radius:0; }
彩色滚动条代码:
/**彩色滚动条样式*/::-webkit-scrollbar { width: 10px; height: 1px;}::-webkit-scrollbar-thumb { background-color: #12b7f5; background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #f6f6f6;}
温馨提示:
本文最后更新于2024-09-22 19:44:50
,某些文章具有时效性。
若有解压密错误或链接已失效,请在下方留言或在 微信公众号留言。
获取解压密码方式:
搜索并关注公众号【资源星球ResourceStar】
回复关键字【皓月星辰】即可免费获取
喜欢就支持一下吧
暂无评论内容