border-radius值应按顺时针顺序填四个角：10px为四角统一，10px 20px为上下同值、左右同值，10px 20px 30px 40px为四角独立控制，50%需宽高相等才成正圆。
border-radius 值怎么填才不奇怪
直接写 border-radius: 10px 最常见，但容易出错——它其实是四个角的简写，顺序是 top-left、top-right、bottom-right、bottom-left。很多人以为“10px”只影响左上角，结果发现四个角都圆了，又试 border-radius: 10px 0，却发现只有左上和右上生效（因为两个值时，后一个自动复制给右下和左下）。
常用组合：
-
border-radius: 4px—— 四角统一，适合常规按钮 -
border-radius: 4px 8px—— 左上/右上=4px，右下/左下=8px -
border-radius: 4px 8px 12px 16px—— 四角分别控制，调试时最灵活 -
border-radius: 50%—— 真正的圆形按钮（需宽高相等）
按钮文字被裁切？可能是 padding 和 border-radius 冲突
当 border-radius 很大（比如 >24px），而按钮内容区域窄、padding 小，文字就容易贴着圆角边缘被视觉“吃掉”。这不是 bug，是渲染时内边距与圆角交叠导致的视觉裁切。
解决办法不是调小 border-radius，而是配平：
- 增大
padding（尤其padding-left和padding-right） - 确保
height足够容纳圆角弧度（例如border-radius: 24px时，height至少 48px 才不挤压） - 避免用
line-height强制居中——它不响应圆角，容易让文字偏移
Firefox 或旧版 Safari 圆角锯齿？加个 will-change
某些浏览器（特别是 Firefox 低版本、iOS 14 之前 Safari）对大半径圆角渲染不平滑，边缘发虚或带锯齿。这不是 CSS 写错了，是 GPU 渲染策略问题。
临时但有效的修复：
- 给按钮加
will-change: transform（触发硬件加速） - 或者加
backface-visibility: hidden，也能诱导浏览器走更优渲染路径 - 注意：不要全局滥用
will-change，仅对明确需要圆角平滑的按钮加
示例：
.btn {
border-radius: 20px;
will-change: transform;
}
伪元素覆盖导致圆角失效
如果你用 ::before 或 ::after 给按钮加装饰（比如背景渐变层、图标遮罩），又没设 z-index 或 border-radius，那外层伪元素会盖住原生圆角，看起来像“圆角丢了”。
检查点：
- 伪元素是否设置了
border-radius？必须和按钮本身一致，否则边缘露直角 - 是否用了
overflow: hidden在父容器上？如果按钮外层有包裹 div 且设了overflow: hidden，但没设border-radius，也会剪掉圆角 - 背景图或
background-image没裁圆？它不受border-radius自动裁剪，得配合background-clip: padding-box
真正要调的从来不是“怎么写圆角”，而是“哪些地方悄悄把它盖住了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
