【WordPress主题美化教程】右侧滚动条样式教程

演示效果

【WordPress主题美化教程】右侧滚动条样式教程

操作方法

在主题目录下找到diy.css文件,如果没有这个文件就到主题的自定义CSS里面添加以下代码
<code class="match-braces">
/**====滚动条样式====*/

::-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;
}

</code>

 

WordPress的CorePress主题为例,点击 主题设置-插入代码-自定义CSS 里面直接放到最后即可!

本文作者:追萌小黑
本文标题:【WordPress主题美化教程】右侧滚动条样式教程
本文链接:https://blog.dxtao.cn/archives/463.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 如遇到加密压缩包,默认解压密码为"blog.dxtao.cn",如遇到无法解压的请联系管理员!
追萌小黑是一个优秀的分享资源站,本站部分资源为互联网收集及各位网友分享而来,特殊原创会标明如有侵犯版权等可联系17334723@qq.com 删除
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录

淘宝优惠券_天猫优惠券