chrome可通过::-webkit-scrollbar-thumb和track的border-radius实现圆角，firefox仅支持scrollbar-width: thin和scrollbar-color，不支持圆角；ios/android完全不支持自定义滚动条样式。
Chrome/Firefox 中自定义滚动条圆角的 CSS 写法
现代浏览器中，::-webkit-scrollbar 仅在 Chromium 内核（Chrome、Edge、Safari）生效，Firefox 不支持该伪元素，只能通过 scrollbar-width 和 scrollbar-color 做粗粒度控制。想统一实现圆角，必须接受“Chrome 可精细调、Firefox 只能降级处理”的现实。
Chrome 下让滚动条变圆的关键是设置 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 的 border-radius：
body {
scrollbar-width: thin; /* Firefox：启用细滚动条 */
scrollbar-color: #888 #f5f5f5; /* Firefox：滑块色 + 轨道色 */
}
<p>/<em> Chrome/Edge/Safari </em>/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
border: 2px solid #f5f5f5; /<em> 避免 thumb 紧贴 track 边缘导致圆角被裁 </em>/
}</p>
-
border-radius值建议设为width / 2（如width: 12px→border-radius: 6px），否则可能不完全圆润 -
border在::-webkit-scrollbar-thumb上不是装饰，而是防止系统默认内边距挤压圆角 - Firefox 下
scrollbar-width: thin仅让滚动条变窄，不支持圆角；设为none会彻底隐藏（仅限桌面端）
给滚动条加阴影时为什么没效果？
直接对 ::-webkit-scrollbar-thumb 加 box-shadow 大概率看不到效果——因为滚动条元素层级受浏览器限制，且部分版本会忽略阴影渲染。真正可靠的做法是“借位”：用父容器的 box-shadow 模拟滚动条投影，或用 outline + outline-offset 曲线救国。
- 推荐方案：给可滚动容器（如
<div class="scrollable">）加 <code>box-shadow: 0 0 8px rgba(0,0,0,0.1)，再配合overflow: overlay（仅 WebKit）或overflow: auto，视觉上阴影会包裹整个滚动区域，包含滚动条位置 - 慎用
box-shadow直接作用于::-webkit-scrollbar-thumb：Chrome 115+ 支持，但旧版无效；Firefox 完全不识别 - 替代技巧：用
outline: 2px solid rgba(0,0,0,0.1)+outline-offset: 2px模拟外发光，兼容性更好，但属于“障眼法” - iOS 中可通过
-webkit-overflow-scrolling: touch（已废弃但仍有影响）优化惯性滚动，但和样式无关 - 若需视觉一致性，唯一可控点是容器背景与圆角：让内容区
border-radius: 12px，内部padding预留空间，滚动时内容边缘“看起来”像带圆角的滚动区域 - 不要尝试用 JavaScript 模拟滚动条（如 perfect-scrollbar），移动端触控体验和性能损耗得不偿失
- 正确写法：在暗色模式媒体查询内，重复声明整套
::-webkit-scrollbar规则，并更新颜色值 - Firefox 需单独为暗色模式设置
scrollbar-color，例如：@media (prefers-color-scheme: dark) { body { scrollbar-color: #555 #222; } } - 避免用
currentColor或未定义变量——滚动条伪元素不继承父级文字色，currentColor会退化为初始黑 - 测试重点：切换系统主题后，滚动条是否仍可辨识、是否与背景融合到消失
移动端（iOS/Android）滚动条样式能否控制？
不能。iOS Safari 和 Android Chrome 默认隐藏滚动条，且不暴露任何伪元素接口。即使强行触发显示（如长按、拖动），也无法用 CSS 修改其形状或阴影。所谓“移动端圆角滚动条”都是错觉——实际是内容区域加了 border-radius 和 overflow: hidden，滚动条本身仍为系统原生样式。
滚动条圆角在暗色模式下颜色翻车怎么办？
滚动条颜色不会自动响应 @media (prefers-color-scheme: dark)，必须手动重写。尤其 ::-webkit-scrollbar-thumb 在深色背景下用浅灰会不可见，而 Firefox 的 scrollbar-color 也不支持媒体查询嵌套。
滚动条样式始终是“尽力而为”的妥协方案，圆角和阴影的跨浏览器一致性比想象中更脆弱。最易被忽略的是：Firefox 的 scrollbar-width 在 macOS 上被完全忽略，而 iOS 下所有自定义都只是幻觉。
