加滚动条轨道边框不能用border，应使用box-shadow: inset 0 0 0 1px #ccc模拟内边框；需配合background-clip: padding-box控制滑块留白，且firefox完全不支持该伪元素。
滚动条轨道边框怎么加？别碰 border 直接写在 ::-webkit-scrollbar-track
直接给 ::-webkit-scrollbar-track 加 border 会失效——它不是普通块级元素，border 不参与渲染，只会被忽略。真正起作用的是 box-shadow 模拟边框，或用 outline（但 outline 不支持圆角）。
推荐做法是：用 box-shadow: inset 0 0 0 1px #ccc 模拟 1px 轨道内边框；若需双色/虚线等复杂效果，得靠背景图或 SVG mask，纯 CSS 无解。
-
::-webkit-scrollbar-track支持background、border-radius、box-shadow，不支持border、padding、margin - 加
border-radius: 8px后，必须同步调大box-shadow的模糊值，否则阴影边缘会“露白” - Firefox 不支持
::-webkit-scrollbar-track，它压根不解析这套伪类，别指望跨浏览器一致
border-spacing 和滚动条有关系吗？完全无关，别混了
border-spacing 是表格专属属性，只对 table { border-collapse: separate } 生效，和滚动条毫无交集。搜“滚动条间距”时误点进表格文档，是新手最常踩的坑。
所谓“滚动条轨道和滑块之间的空隙”，不是靠 border-spacing 控制的，而是由三者共同决定：::-webkit-scrollbar 宽度、::-webkit-scrollbar-track 内边距感（靠透明 border + background-clip: padding-box）、以及 ::-webkit-scrollbar-thumb 的尺寸和偏移。
- 写
table { border-spacing: 10px }对div { overflow: auto }里的滚动条零影响 - 想让滑块离轨道边缘留空？用
::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; } - 误把
border-spacing当成通用“间距控制”属性，会导致 DevTools 里反复刷新却看不到变化
为什么滑块看起来“贴着轨道边”？缺了 background-clip: padding-box
即使给 ::-webkit-scrollbar-thumb 加了 border-radius 和透明 border，滑块背景仍可能“撑满”整个轨道区域，视觉上紧贴边界。这不是尺寸算错，是背景默认绘制到了边框外沿。
关键补丁就一句：background-clip: padding-box。它强制背景只画在内边距框内，透明边框区域就自然成了“留白”。没有它，border 再宽也白搭。
- 必须和
border配套使用，单写background-clip无效 - 别用
background-clip: content-box——内容区太小，滑块会缩成一条线 - 某些旧版 Chrome（background: linear-gradient(...) 模拟内缩效果
Firefox 下滚动条轨道怎么设样式？基本不能设
Firefox 自 64 版起彻底放弃自定义滚动条伪类支持，::-moz-scrollbar-track 等早已被移除。现在它只允许通过 scrollbar-width（auto/thin/none）和 scrollbar-color（滑块色+轨道色）做极简控制。
想在 Firefox 里实现带边框、圆角、阴影的轨道？没标准方案。要么接受原生样式，要么用 JS 模拟滚动（如 simplebar），但会丢失原生滚动惯性和性能。
-
scrollbar-color: #666 #eee只设颜色，不支持边框、圆角、渐变 -
scrollbar-width: thin在部分 Linux/Windows 上无效，取决于系统设置 - 别试图用
@supports selector(::-moz-scrollbar-track)做特性检测——它永远返回 false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
