子比主题美化教程：添加侧边彩色滚动条

WordPress 默认的浏览器滚动条样式较为简陋，影响整体视觉美感。虽然部分主题已内置美化滚动条，但子比主题（Zibll）默认未启用该功能。好软猫为你带来一套 轻量、兼容性强的侧边彩色滚动条美化方案——仅需在主题后台「外观 → 自定义 → 额外 CSS」中粘贴几行 CSS 代码，即可实现自定义颜色、宽度与圆角的滚动条效果，适配 Chrome、Edge 等基于 WebKit 内核的浏览器，提升网站细节质感。如果主题没有自定义代码那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！

单色滚动条代码

/*滚动条显示样式 _ 好软猫[www.haoruanmao.com]*/
::-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;}
/*滚动条显示样式 _ 好软猫[www.haoruanmao.com]*/

侧边彩色滚动条代码

/*彩色滚动条样式 _ 好软猫[www.haoruanmao.com]*/
::-webkit-scrollbar {width:10px;height:1px;}
::-webkit-scrollbar-thumb {background-color:#12b7f5;background-image:-webkit-linear-gradient(45deg,rgba(255,93,143,1)25%,transparent25%,transparent50%,rgba(255,93,143,1)50%,rgba(255,93,143,1)75%,transparent75%,transparent);}
::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:#f6f6f6;}
/*彩色滚动条样式 _ 好软猫[www.haoruanmao.com]*/