滚动条阴影需用inset内阴影实现纵深定位：滑块用inset 0 0 6px rgba(0,0,0,0.2)，轨道用inset 0 0 4px rgba(0,0,0,0.08)，配合border-radius；仅WebKit/Blink支持，暗色模式需媒体查询调整颜色。
滚动条加阴影不是为了“好看就加”，而是要让滑块在轨道里有明确的纵深定位——否则用户拖动时容易误判位置，尤其在深色背景或高对比界面中。
滚动条滑块用 box-shadow: inset 才有凹陷感
直接给 ::-webkit-scrollbar-thumb 加 box-shadow: 0 0 4px rgba(0,0,0,0.2) 是平铺式外阴影，看起来像浮在轨道上，反而削弱控制感。真正能模拟物理按压反馈的是内阴影：
-
box-shadow: inset 0 0 6px rgba(0,0,0,0.2)—— 模糊值控制在 4–8px 之间，太小没层次，太大边缘发虚 - 必须配合
border-radius（建议和轨道一致，如6px），否则圆角+直边阴影会错位 - hover 状态下可加大模糊值和透明度，比如
inset 0 0 10px rgba(0,0,0,0.3)，但别改颜色，避免色相跳变
::-webkit-scrollbar-track 加内阴影比外阴影更稳妥
有人试过给轨道加 box-shadow: 0 0 4px rgba(0,0,0,0.1) 外阴影，结果在 macOS Chrome 下边缘被裁掉——因为滚动条容器本身没有留出额外渲染空间。正确做法是：
- 统一用
inset内阴影，例如box-shadow: inset 0 0 4px rgba(0,0,0,0.08) - 这个值本质是让轨道“微微下陷”，和滑块的“微凸”形成视觉对仗，不依赖外部留白
- 若轨道背景色较深（如
#222），把透明度降到0.04，否则阴影会吃掉原有灰阶层次
Firefox 和 Safari 不支持 ::-webkit-scrollbar，别硬塞
写完一堆 inset 阴影，切到 Firefox 发现完全没反应？这不是你代码错了，是标准不支持。目前只有 WebKit/Blink 内核（Chrome、Edge、Safari）识别这些伪元素。处理方式很实际：
立即学习“前端免费学习笔记（深入）”；
- 不做降级样式（比如用
filter: drop-shadow()包裹整个容器），它会污染滚动区域，导致 iOS Safari 滚动卡顿 - 真要全浏览器一致，用
SimpleBar或OverlayScrollbars这类 JS 库，它们在非 WebKit 下会重建滚动条 DOM 并注入阴影 - 如果只面向内部系统或已知 Chrome 环境，可以放心用，但记得在 CSS 开头加注释说明兼容范围
最易被忽略的一点：阴影参数不是调出来就行，它得和滚动条宽度、背景色、页面整体明暗节奏咬合。比如在暗色模式下，rgba(0,0,0,0.2) 的滑块阴影会显得过重，得同步换成 rgba(255,255,255,0.08) 并加 @media (prefers-color-scheme: dark) 媒体查询覆盖。
