彩色滚动条CSS：粉蓝斜纹糖果条（附完整代码）

给浏览器默认那根灰滚动条换个彩色斜纹：蓝底 + 粉色 45° 条纹，糖果条质感，页面一下就有辨识度了。纯 CSS，不用 JS。下面每块都能点「预览效果」直接滚动着看，复制走贴进额外 CSS 就生效。

原版 · 粉蓝斜纹

<style>.scroll-demo{height:170px;overflow:auto;border:1px solid #e5e8ef;border-radius:10px;padding:14px;font-size:13px;color:#5b6480}.scroll-demo p{margin:0 0 10px}.tall{height:420px;background:repeating-linear-gradient(#f7f8fc 0 22px,#eef0f7 22px 44px);border-radius:8px}/**彩色滚动条*/::-webkit-scrollbar {    width: 8px;      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;}</style><div class="scroll-demo">  <p>向下滚动，看右侧滚动条 →</p>  <div class="tall"></div>  <p>到底了</p></div>

这份原版有几处问题，我实测确认过，用之前最好知道：

• 横向滚动条只有 1 像素：height: 1px 让底部横条变成一根几乎抓不住的细线，实测宽度确实是 1px。有横向滚动的页面（宽表格、代码块）基本没法用。
• 火狐上完全没效果：::-webkit-scrollbar 只有 Chrome / Edge / Safari 认，Firefox 不支持，火狐用户看到的还是默认灰条。
• 滑块没有圆角，边角是硬的。
• 用的是过时前缀：-webkit-linear-gradient、-webkit-box-shadow 都是老写法，现在标准写法是 linear-gradient / box-shadow（新浏览器都认，旧的也还兼容）。
• 没有 hover 反馈，鼠标划上去没变化。

说明一下：代码块正文下方如果出现滚动条，那是代码框容器自带的（细、半透明灰，刻意做得低调），跟本文演示的彩色滚动条无关。真正的效果请看点开预览后，里面那个虚线盒子的滚动条——那才是这份代码渲染出来的。

修复版 · 补齐兼容和细节

<style>/** 彩色滚动条 · 修复版（横竖同为 8px，Firefox 也能出效果） */.scroll-demo{height:170px;overflow:auto;border:1px solid #e5e8ef;border-radius:10px;padding:14px;font-size:13px;color:#5b6480}.scroll-demo p{margin:0 0 10px}.tall{height:420px;background:repeating-linear-gradient(#f7f8fc 0 22px,#eef0f7 22px 44px);border-radius:8px}/* 关键：标准属性必须放进 @supports 守卫。   直接写 html{scrollbar-color:...} 会让 Chrome 121+ 忽略下面的 ::-webkit-scrollbar，斜纹直接消失 */@supports not selector(::-webkit-scrollbar){  html{scrollbar-color:#12b7f5 #f1f3f7;scrollbar-width:thin}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f3f7;border-radius:8px;box-shadow:inset 0 0 4px rgba(0,0,0,.08)}::-webkit-scrollbar-thumb{  border-radius:8px;  background-color:#12b7f5;  background-image:linear-gradient(45deg,rgba(255,93,143,.95) 25%,transparent 25%,transparent 50%,rgba(255,93,143,.95) 50%,rgba(255,93,143,.95) 75%,transparent 75%,transparent);}::-webkit-scrollbar-thumb:hover{filter:brightness(1.12)}::-webkit-scrollbar-corner{background:#f1f3f7}</style><div class="scroll-demo">  <p>向下滚动，看右侧滚动条 →</p>  <div class="tall"></div>  <p>到底了</p></div>

这里有个很容易踩的坑，单独说一下：

给 Firefox 补兼容，直觉写法是直接加 html{scrollbar-color:...;scrollbar-width:thin}。但 Chrome 121+ 已经支持标准属性了，一旦写了 scrollbar-color，浏览器就会改用标准渲染、完全忽略 ::-webkit-scrollbar。我实测过：直接写的话，斜纹整条消失（粉色像素归零），只剩纯蓝，滚动条宽度也从 8px 变成 15px。

正确做法是用 @supports not selector(::-webkit-scrollbar) 包起来——Chrome 认得这个伪元素，守卫不成立，走 webkit 那套斜纹；Firefox 不认，守卫成立，走标准属性。两边各得其所。

另外这版把 height 从 1px 改成 8px、加了圆角、换掉过时前缀、补了 hover 提亮和 scrollbar-corner（横竖滚动条交汇的那个小方块，不设会是白的）。

深色款 · 适合暗色主题

<style>/** 彩色滚动条 · 深色主题款 */.scroll-demo{height:170px;overflow:auto;border:1px solid #2a3140;border-radius:10px;padding:14px;font-size:13px;color:#8b949e;background:#151922}.scroll-demo p{margin:0 0 10px}.tall{height:420px;background:repeating-linear-gradient(#1b202b 0 22px,#232936 22px 44px);border-radius:8px}@supports not selector(::-webkit-scrollbar){  html{scrollbar-color:#4b5563 #1b1f27;scrollbar-width:thin}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1b1f27;border-radius:10px}::-webkit-scrollbar-thumb{  border-radius:10px;  background-color:#4b5563;  background-image:linear-gradient(45deg,rgba(139,92,246,.85) 25%,transparent 25%,transparent 50%,rgba(139,92,246,.85) 50%,rgba(139,92,246,.85) 75%,transparent 75%,transparent);}::-webkit-scrollbar-thumb:hover{filter:brightness(1.3)}::-webkit-scrollbar-corner{background:#1b1f27}</style><div class="scroll-demo">  <p>向下滚动，看右侧滚动条 →</p>  <div class="tall"></div>  <p>到底了</p></div>

深灰底 + 紫色斜纹，滑块稍宽（10px），在暗色页面里不至于太抢眼。

局部生效版 · 只改某个容器

前面几版用的是不带前缀的 ::-webkit-scrollbar，会作用于页面上所有滚动区域——包括 textarea、代码块、下拉框、侧边小工具，全都变成彩色。有些地方会显得乱。

想只给某一块加，就把选择器限定在容器上：

<style>/** 彩色滚动条 · 局部生效版（只给指定容器加，不影响全站） */.scroll-demo{height:170px;overflow:auto;border:1px solid #f0e2cc;border-radius:10px;padding:14px;font-size:13px;color:#8a6a45;background:#fffdf8}.scroll-demo p{margin:0 0 10px}.tall{height:420px;background:repeating-linear-gradient(#fdf6ea 0 22px,#f7ecd9 22px 44px);border-radius:8px}/* 把 .scroll-demo 换成你自己的容器名，比如 .entry-content、.code-box */@supports not selector(::-webkit-scrollbar){  .scroll-demo{scrollbar-color:#f0913c #fdf3e7;scrollbar-width:thin}}.scroll-demo::-webkit-scrollbar{width:10px;height:10px}.scroll-demo::-webkit-scrollbar-track{background:#fdf3e7;border-radius:10px}.scroll-demo::-webkit-scrollbar-thumb{border-radius:10px;background:linear-gradient(180deg,#f0913c,#e8543f)}.scroll-demo::-webkit-scrollbar-thumb:hover{filter:brightness(1.1)}</style><div class="scroll-demo">  <p>向下滚动，看右侧滚动条 →</p>  <div class="tall"></div>  <p>到底了</p></div>

改的时候注意这几点

• width 管竖向、height 管横向，别只改一个。竖向建议 8–12px，再细就不好抓了，再粗会挤占正文宽度。
• 加火狐兼容必须用 @supports not selector(::-webkit-scrollbar) 包起来，直接写 scrollbar-color 会把 Chrome 的自定义效果顶掉（实测斜纹消失、宽度变 15px）。
• 换色改两处：background-color 是条纹间隙透出的底色，background-image 里的 rgba(255,93,143,.95) 是条纹色。想做纯色就删掉 background-image 整行。
• 改条纹角度：45deg 换成 90deg 是竖条纹，0deg 是横条纹。
• 改条纹密度：把每组 25% 改成 12.5%，条纹会密一倍。
• 不要给 ::-webkit-scrollbar 设 display:none 来隐藏滚动条——那样区域就滚不动了。要隐藏请用 scrollbar-width:none 配合 ::-webkit-scrollbar{width:0}。
• 移动端基本看不到：iOS / Android 用的是系统覆盖式滚动条，不认这套样式，只在桌面端生效。

怎么用

复制 CSS 部分 → WordPress 后台「外观 → 自定义 → 额外 CSS」粘贴即可（推荐，不动主题文件）；或者放进子主题的 style.css。

贴进额外 CSS 时，把代码块里的 .scroll-demo、p、.tall 那几行删掉，那是为了在预览里造一个可滚动区域，你自己的页面已经有滚动内容了，留着没用。

兼容性

::-webkit-scrollbar 在 Chrome / Edge / Safari 全系可用，Firefox 不支持（靠上面 @supports 里的标准属性兜底，效果是纯色细条，没有斜纹）。另外 iOS Safari 和安卓 Chrome 用的是系统覆盖式滚动条，这套样式在手机上不生效。

代码仅供学习交流，禁止商用。更多网站美化代码，前往 维形筑网 www.wxzcw.com。