::-webkit-scrollbar 无法实现内凹槽质感，因其无深度建模能力；需用 box-shadow: inset 在 track 和 thumb 上模拟明暗过渡，配合克制的 border-radius 与呼应的阴影方向，firefox/safari 则不支持该效果。
直接给 body 或 html 写 ::-webkit-scrollbar 无法做出“内凹槽”质感，这不是样式没写对，而是浏览器根本不渲染那种立体效果——::-webkit-scrollbar 只控制宽高和颜色，没有深度、光照或凹陷建模能力。真要模拟内凹槽感，得靠 box-shadow: inset 配合轨道（track）的视觉欺骗。
为什么 ::-webkit-scrollbar-track 设成灰色也不像“凹进去”
因为默认的 background-color 是平涂色块，缺乏明暗过渡。人眼判断“凹陷”的依据是顶部亮、底部暗的渐变阴影，而纯色轨道只提供一个静态面，没有纵深线索。
- 必须给
::-webkit-scrollbar-track加box-shadow: inset，例如：box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), inset 0 -1px 2px rgba(255,255,255,0.3) - 两层
inset阴影方向相反：上层模拟顶部受光（浅色向下偏移），下层模拟底部阴影（深色向上偏移） - 不能只加一层，单层
inset会显得“浮”或“脏”，不是凹，是糊 -
border-radius要克制，设为4px左右即可；超过一半宽度（如width: 8px时设border-radius: 6px）会让边缘塌陷失真
::-webkit-scrollbar-thumb 怎么做出“嵌入轨道”的错觉
滑块（thumb）不能只是个实心矩形，它得看起来“卡在轨道里”。关键不是颜色深浅，而是边缘光影是否匹配轨道的凹陷逻辑。
- 滑块本身也要加
box-shadow: inset，且参数需与轨道呼应：比如轨道用inset 0 1px表示上沿亮，则滑块用inset 0 -1px强化下压感 - 避免用纯黑/纯白，推荐
background: #a0a0a0+box-shadow: inset 0 -2px 3px rgba(0,0,0,0.15) - hover 状态别只改背景色，要同步加大
inset垂直偏移（如从-2px到-4px），制造“被按得更深”的动效 - 绝对不要给 thumb 设
border—— 边框会破坏嵌入感，让它看起来像贴上去的盖子，而不是沉进去的块
Firefox 和 Safari 怎么保持“内凹槽”一致性
Firefox 完全无视 ::-webkit-scrollbar，Safari 16.4+ 才开始支持 scrollbar-color，但这两个属性只管颜色，不管阴影。所以“内凹槽”质感在非 Webkit 浏览器里根本不存在——你得接受这个事实，或主动降级。
- Firefox 只响应
scrollbar-width: thin和scrollbar-color: #a0a0a0 #f0f0f0，无法添加inset效果；此时建议把轨道背景设为带细微噪点的渐变（background: linear-gradient(to bottom, #f5f5f5, #e5e5e5)），比纯色更接近“微凹”观感 - Safari 旧版本（inset 渲染偏软，
blur-radius超过2px就容易发虚；稳妥做法是把所有inset的blur控制在1–2px，靠偏移量（0 -1px/0 1px）驱动立体感 - 不要试图用
@supports检测inset支持——它永远返回 true，但渲染结果不可控；更实际的是用 JS 检测CSS.supports('selector', '::-webkit-scrollbar')来分流
真正难的不是凑出那几行 box-shadow: inset，而是意识到：滚动条没有“物理凹槽”，所有质感都来自你对光影规则的理解和克制使用。多加一层阴影、多调一次 border-radius，往往就从“内凹”变成“脏污”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
