胶囊按钮需设 border-radius 为高度一半（如高40px则设20px），推荐用 border-radius: 50em 或 css 自定义属性动态适配；悬停仅用 transform 或 box-shadow，必配 :focus 样式；并排时用 flex + gap；文字居中用 flex；暗色模式需手动重置 box-shadow 和 border-color。
用 border-radius 控制胶囊形，但别只设固定值
胶囊按钮本质是长矩形两端为半圆，关键在 border-radius 要匹配高度：若按钮高 40px，左右圆角应为 20px（即高度一半）。硬写 border-radius: 20px 在响应式场景下会失效——比如文字缩放或移动端字体变大后，高度变化，圆角就“撑不圆”了。
更稳妥的做法是：
- 用
border-radius: var(--radius)配合 CSS 自定义属性，在 JS 或媒体查询中动态更新 - 或直接用
border-radius: 50em（em 单位依赖 font-size，但足够大时浏览器自动裁剪为半圆，兼容性好且无需计算） - 避免
border-radius: 9999px—— Safari 旧版本可能渲染异常，且语义不清
悬浮效果要兼顾可访问性与性能
:hover 状态下仅用 transform: translateY(-2px) 或 box-shadow 微调，别改 height、padding 或触发布局重排（reflow）。否则快速悬停时会出现抖动，且对屏幕阅读器用户不友好（他们无法触发 :hover）。
同时注意：
- 必须补充
:focus样式，用outline或等效box-shadow，确保键盘用户能感知焦点 - 不要只靠颜色变化表示悬停态（如仅变深色），色弱用户可能无法识别
- 若按钮组内多个胶囊并排，悬停单个时避免其他按钮位置偏移（禁用
margin动画，改用transform）
组合按钮的间距和对齐容易被忽略
多个胶囊按钮横向排列时，常见错误是用 margin-right 分隔——末尾按钮多出多余空白，或响应式断行后间隙错乱。
推荐方案：
- 父容器设
display: flex+gap: 8px（现代浏览器支持良好；不支持时用margin+:not(:last-child)回退） - 文字垂直居中靠
line-height不可靠（尤其多行或不同字体），统一用display: flex; align-items: center; justify-content: center - 若按钮含图标，确保图标和文字基线对齐：给
svg或i加vertical-align: -0.125em或margin-top: -1px微调
暗色模式下胶囊边框和阴影需手动适配
系统级暗色模式（@media (prefers-color-scheme: dark)）不会自动反转 box-shadow 或 border-color。如果悬浮时加了浅色阴影（如 box-shadow: 0 2px 8px rgba(0,0,0,0.1)），在暗背景下会几乎不可见。
务必显式覆盖：
- 在
@media (prefers-color-scheme: dark)中重置box-shadow为rgba(255,255,255,0.15)类似值 - 若用
border做胶囊轮廓，也要同步调整border-color，否则暗色下可能消失 - 测试时别只看 Chrome DevTools 的模拟开关——真机开启暗色模式后，部分安卓 WebView 对
prefers-color-scheme支持滞后
胶囊形状本身简单，但组合、响应、可访问、主题适配这四层叠加后，细节很容易漏掉。特别是 gap 和 prefers-color-scheme 这类看似边缘的点，上线后才暴露问题最多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
