滚动条宽度和圆角只能在 Webkit 内核浏览器（Chrome、Edge、Safari）中通过 ::-webkit-scrollbar 系列伪元素实现；Firefox 完全不支持，只能用 scrollbar-width 和 scrollbar-color 做极简控制。
设置滚动条宽度必须用 ::-webkit-scrollbar
垂直滚动条宽度由 ::-webkit-scrollbar { width: 10px; } 控制，水平滚动条高度由 height: 10px 控制。这两个值互不影响，可单独设置。
-
width只对垂直滚动条生效，height只对水平滚动条生效 - 设为
0或负数不会隐藏滚动条，而是退回到系统默认宽度 - 实际显示宽度受操作系统限制（比如 macOS 默认禁用常驻滚动条，即使设了
width也可能只在 hover 时出现）
圆角靠 border-radius，但有尺寸约束
::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 都支持 border-radius，但取值不能随意：
- 推荐设为滚动条宽度的一半（如
width: 12px→border-radius: 6px），能形成自然胶囊状 - 超过一半（比如
width: 10px却设border-radius: 8px）会导致视觉错位或边缘裁切 -
border-radius对::-webkit-scrollbar本体无效，它只是容器，不渲染图形
Firefox 怎么办：别硬套 Webkit 写法
Firefox 完全忽略所有 ::-webkit- 伪元素，只认两个 CSS 属性：
-
scrollbar-width: thin—— 仅三个值：auto、thin、none，没有像素级控制 -
scrollbar-color: #666 #f0f0f0—— 顺序固定，第一个是滑块色，第二个是轨道色；设成transparent会让轨道“看不见但还在”，拖动时容易误判位置 - 这两个属性无法加
border-radius、box-shadow或 hover 效果，也不作用于局部容器（只对html或设置了overflow的块级元素生效）
真正麻烦的不是写法差异，而是设计预期：Webkit 下你能做出带渐变、阴影、hover 缩放的滑块，Firefox 里连圆角都做不到。如果项目必须统一视觉，得接受降级，或者用 JS 滚动库模拟滚动行为——但那就不再是原生滚动条了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
