![图片[1]-WordPress添加侧边彩色滚动条-梦都歌-精品资源社区,梦都歌资源网](https://www.mduge.com/wp-content/uploads/2024/08/7eac4026c948f44e.jpg)
前言
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;
}
资源下载说明:
PS:本站部分大类资源均有免费和付费下载方式(免费和付费区别就是下载速度不同)
本站所有资源百分之95都是通过测试能正常使用才发布
所出售的付费资源均为全网最低价,单价最高15RMB-且资源都附带教程
PS:本站部分大类资源均有免费和付费下载方式(免费和付费区别就是下载速度不同)
本站所有资源百分之95都是通过测试能正常使用才发布
所出售的付费资源均为全网最低价,单价最高15RMB-且资源都附带教程
© 版权声明
THE END
暂无评论内容