按钮圆角显示异常通常源于样式干扰或取值错误，需检查作用元素、overflow设置、子元素覆盖、border-radius单位逻辑、outline/box-shadow差异、border宽度与圆角比例关系及兼容性问题。
按钮圆角显示不对，通常不是 border-radius 没生效，而是被其他样式干扰或取值逻辑没理清。重点检查这几点：
确认 border-radius 作用在正确元素上
常见问题是给 <button></button> 设置了圆角，但内部有子元素（比如图标、文字容器）或用了伪元素（::before/::after），而这些子元素的背景、边框或溢出行为覆盖/裁剪了圆角效果。
- 用浏览器开发者工具（F12）选中按钮，看“Computed”面板里
border-radius是否真实计算为预期值 - 检查是否有
overflow: hidden缺失——父容器没设，子元素可能撑出圆角范围 - 若按钮内嵌了
<span></span>或<i></i>，确保它们没设置border-radius: 0或覆盖了父级样式
注意 border-radius 的取值单位和逻辑
border-radius 支持多种写法，写错会导致四角不一致或无效：
- 单值如
border-radius: 8px：四个角等效，安全推荐 - 双值如
border-radius: 8px 4px：表示「水平半径 垂直半径」，不是「左上 右下」！容易误解 - 四值如
border-radius: 8px 12px 6px 4px：顺序是「左上、右上、右下、左下」，顺时针别记反 - 避免混用单位（如
5px 2em），尤其在缩放或响应式场景下易失真
排查外层干扰样式
以下样式常“吃掉”圆角视觉效果：
立即学习“前端免费学习笔记（深入）”；
-
outline: 2px solid #007bff：轮廓线默认不跟随圆角，会画出直角框，建议改用box-shadow模拟描边 -
background-clip: padding-box（默认值）没问题，但若误设为border-box，背景可能盖住圆角边缘 - 按钮有
border且宽度较大（如border: 3px solid #ccc），而border-radius小于边框宽度一半时，圆角会退化为斜角甚至失效 - 使用了
transform: scale()或zoom，可能触发渲染异常，圆角锯齿或错位
兼容性与渲染细节
老版本 Safari 或某些安卓 WebView 对 border-radius 渲染较弱：
- 给按钮加
overflow: hidden强制裁剪，能兜底修复部分渲染偏差 - 避免在
button上同时用border-radius和background-image（尤其是渐变+圆角），可改用纯background: linear-gradient() - 如果按钮高度动态（如行高变化），优先用
padding控制尺寸，而非固定height，防止圆角被挤压变形
基本上就这些。调圆角不复杂，但容易忽略子元素、边框比例和 outline 干扰。先看 computed 值，再逐项排除，一般两分钟就能定位。
