胶囊形滚动条滑块需设border-radius等于滑块宽高一半（如宽12px则设6px），配合::-webkit-scrollbar显式尺寸控制；该方案仅webkit/blink内核（chrome/edge/safari）有效，firefox和ios safari不支持圆角定制。
滚动条滑块怎么变胶囊形
滑块两端呈半圆弧，本质是让 ::-webkit-scrollbar-thumb 的宽度与圆角匹配。当 border-radius 值等于滑块高度（垂直滚动条）或宽度（水平滚动条）的一半时，就自然形成胶囊状——也就是你想要的“两端半圆弧”效果。
关键不是“画弧”，而是用圆角把矩形滑块的直角盖住。比如滑块宽 12px，设 border-radius: 6px，上下边缘就刚好是半圆；若设 8px，就会轻微溢出、触发浏览器自动裁剪，反而可能出细缝或渲染异常。
- 必须搭配
::-webkit-scrollbar显式设置尺寸，否则浏览器默认宽度不可控，border-radius失效 - 避免
border-radius超过尺寸一半（如宽12px设border-radius: 7px），Safari 可能渲染出毛边或错位 - 加
background-clip: content-box防止背景色撑满圆角外沿，确保弧形干净
为什么只在 Chrome/Edge/Safari 里生效
::-webkit-scrollbar 系列伪元素是 WebKit/Blink 内核专属，Firefox 完全不识别。它连 scrollbar-width 和 scrollbar-color 都只支持基础配色，无法控制形状或圆角。
这意味着：你在 Chrome 里调好的胶囊滑块，在 Firefox 中会回退到系统原生样式——通常是直角矩形，且尺寸、颜色均不可控。
- 不要试图用
@supports检测::-webkit-scrollbar，它不触发 CSS 支持查询 - 若需跨浏览器统一外观，只能放弃纯 CSS 方案，改用 JS 滚动库（如 simplebar）或接受 Firefox 默认样式
- macOS 上滚动条默认隐藏，需用户悬停才出现，此时你的
::-webkit-scrollbar-thumb:hover才起作用
滑块太细导致圆角不明显怎么办
当容器内容少、滚动区域小，浏览器会自动压缩滑块尺寸，哪怕你写了 width: 12px，实际渲染可能只剩 6px，这时 border-radius: 6px 就会失效甚至翻车。
解决思路不是硬调更大圆角，而是守住最小可渲染尺寸：
- 给
::-webkit-scrollbar设置明确最小宽度，例如width: 8px（低于此值多数浏览器不再渲染） - 用
min-height: 20px（垂直滚动）或min-width: 20px（水平滚动）约束::-webkit-scrollbar-thumb，强制其有足够空间表现圆角 - 避免在
overflow: overlay模式下尝试——该模式下滑块无固定尺寸，圆角策略基本失效
移动端 Safari 的特殊限制
iOS/iPadOS 的 Safari 对 ::-webkit-scrollbar 支持极弱：它识别 ::-webkit-scrollbar 和 ::-webkit-scrollbar-track，但常忽略 ::-webkit-scrollbar-thumb 的 border-radius 和 background，只保留最简轮廓。
实测中，即使加上 -webkit-appearance: none，iOS 17+ 仍大概率渲染为直角细条，且无法响应 :hover（因为没鼠标）。这不是代码写错，是引擎限制。
- 别在 iOS 上测试圆角效果——它不反映真实行为
- 如果项目强依赖移动端滚动条定制，优先考虑封装一个
div+touchstart/move+scrollTop的轻量模拟滚动方案 - 注意：iOS 的“弹性滚动”惯性行为与自定义滚动条逻辑冲突，强行覆盖易引发卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
