最常见的原因是滑块宽高不等且border-radius超过较小边的一半，如width:8px;height:16px时border-radius:8px会导致上下边缘被裁，视觉仍为胶囊形；真正圆润需宽高等值且border-radius设为宽度一半或50%。
为什么::-webkit-scrollbar-thumb设了border-radius还是方的
最常见原因是滑块宽高不等，而border-radius值超过较小边的一半。比如width: 8px; height: 16px;时，border-radius: 8px会让上下边缘被裁掉，视觉上仍是“胶囊形”而非圆形；要真正圆润，必须让宽高等于，且border-radius设为宽度一半或更大（如width: 12px; height: 12px; border-radius: 6px;）。另外，::-webkit-scrollbar没设width（垂直）或height（水平），整套规则直接失效——浏览器连滑块容器都不渲染。
::-webkit-scrollbar-thumb怎么实现纯圆点效果
关键不是“加圆角”，而是把滑块压成正方形再拉满圆角：
-
::-webkit-scrollbar必须显式设width和height一致（如width: 14px; height: 14px;） -
::-webkit-scrollbar-thumb设width: 14px; height: 14px; border-radius: 50%;（别用7px，50%更稳） - 必须配
background，否则透明不可见；可用box-shadow模拟外发光，但Safari不支持该伪元素上的阴影 - 轨道
::-webkit-scrollbar-track也建议设border-radius: 50%，否则圆点滑过直角轨道会显得突兀
Firefox 和 Safari 能不能显示圆形滑块
不能。Firefox 完全无视::-webkit-scrollbar系列，只认scrollbar-width和scrollbar-color，这两个属性连圆角都不支持；Safari 直到 16.4+ 才有限支持::-webkit-scrollbar，但border-radius在 macOS 上常被忽略，iOS Safari 则基本不响应:hover和transition。如果你真需要跨浏览器的圆形指示器效果，唯一可靠路径是用 JS 库（如 simplebar）完全重绘滚动条，用position: absolute画一个div模拟滑块，并绑定scroll事件实时更新位置。
容易被忽略的兼容性陷阱
自定义滚动条不是“写了就生效”的样式，它依赖真实滚动行为触发：
- 父容器必须有
overflow-y: auto或scroll，且子内容高度真超出容器——否则::-webkit-scrollbar-thumb压根不渲染 - 别写在
html或body上：某些 UI 框架（如 Ant Design）会全局display: none掉::-webkit-scrollbar，得用!important覆盖；更稳妥的是限定到具体容器，如.scroll-container::-webkit-scrollbar-thumb - 深色模式下，
@media (prefers-color-scheme: dark)不能直接包在外面，得单独写两套规则并靠类名切换，否则 Safari 会漏掉媒体查询内的伪元素
border-radius的宽容度极低，别指望它和 Chrome 表现一致。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
