用border-radius:999px替代50%可避免缩放或字体变化时露白边；胶囊主体需overflow:hidden防伪元素溢出；文字按钮要line-height与height一致确保垂直对齐。
伪元素做胶囊按钮时，border-radius 怎么设才不露白边
用 ::before 或 ::after 拼接左右半圆，本质是靠两个元素的 border-radius 对齐。常见错误是两边都设 50%，但父容器有 padding 或子元素有 margin 时，视觉上会断开——因为圆角半径计算基于各自盒模型，不是相对父容器宽度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
border-radius: 999px（比50%更鲁棒，尤其在缩放或字体变化时） - 胶囊主体设
overflow: hidden，避免伪元素溢出导致接缝错位 - 若按钮含文字，确保
line-height和height一致，否则上下伪元素垂直对不齐
用 ::before + ::after 实现左右半圆，为什么点击区域变小了
伪元素默认不参与交互，即使视觉上盖住了按钮边缘，click 事件仍只响应到主元素内容区。这不是 bug，是规范行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给主按钮加
position: relative，再给伪元素加pointer-events: none—— 这样点击穿透到下层 - 如果必须让伪元素可点（比如纯图标按钮），改用
content: ""+position: absolute+z-index: -1把它垫在底层，同时主元素设pointer-events: auto - 别依赖伪元素撑开点击热区：热区大小由主元素的
padding和width/height决定，伪元素只是“画皮”
Chrome 和 Safari 下胶囊边缘模糊，是不是抗锯齿问题
不是抗锯齿，是 subpixel 渲染差异。当伪元素左/右边界落在非整像素位置（比如 left: 0.5px），Safari 会轻微模糊，Chrome 可能直接舍入，造成接缝错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有定位值强制用整数：
left: 0、right: 0，避免 calc() 里出现小数 - 禁用硬件加速：
transform: translateZ(0)有时会让模糊更明显，删掉 - 如果用了
scale()缩放按钮，记得用transform: scale(1)重置，否则伪元素也会被缩放变形
要不要用 clip-path 替代伪元素
可以，但得看兼容性要求。clip-path: ellipse() 或 inset(0 round 24px) 一条规则就能搞定胶囊形，没有伪元素管理成本。但它在旧版 Safari（
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果只支持现代浏览器，优先用
clip-path: inset(0 round var(--radius))，配合 CSS 变量控制圆角，维护成本最低 - 需要兼容 iOS 14 或 Android Chrome 80 以下？老老实实用伪元素 +
border-radius: 999px -
clip-path不影响点击区域，也不触发重排，性能略优；但动画时若用clip-path做过渡，部分安卓机有闪烁，不如transform稳定
最易被忽略的是：伪元素的 box-sizing 默认是 content-box，一旦你给它加了 border 或 padding，尺寸就失控了。真要加边框，第一件事就是写 box-sizing: border-box —— 否则左右半圆永远对不齐。
