最常见原因是按钮无背景色或边框导致圆角不可见，或父容器overflow:hidden裁剪圆角；还需处理系统默认边框、框架重置及iOS Safari的-webkit-appearance干扰。
button 的 border-radius 为什么写了却没效果
最常见原因是按钮本身没“显形”——没有 background-color 或 border，圆角就藏在透明里；或者父容器加了 overflow: hidden，把圆角裁掉了。另外，浏览器默认给 button 加的系统边框（比如 Chrome 的虚线）会压住圆角边缘，必须显式写 border: none 或 border: 1px solid transparent 才能露出来。
排查顺序建议：
- 临时加
border: 1px solid red，看圆角是否出现在边框上 - 检查父级有没有
overflow: hidden，尤其在滚动容器或卡片组件里 - 用 DevTools 看 computed 样式，确认
border-radius值被计算出来了，且没被 UI 框架（如 Bootstrap、Ant Design）的 base style 覆盖 - 旧版 Safari 或 iOS WebView 中，补一句
-webkit-appearance: none能解决渲染不生效问题
做正圆按钮必须满足的三个硬条件
border-radius: 50% 不等于“一定出圆”，它只表示“各角半径为宽高的一半”。所以要真出正圆，得同时满足：
-
width和height必须严格相等（比如都设48px），不能靠padding或line-height撑开尺寸 - 避免用
min-width/max-width单独控制某一边，否则等比关系会被打破 - 确保没有内联
padding或font-size导致内容区溢出，让实际渲染高度偏离设定值
响应式场景下推荐用 aspect-ratio: 1 / 1 替代固定宽高，但注意 Safari 15.4+ 才支持；老浏览器需降级为固定像素 + @supports 检测。
立即学习“前端免费学习笔记（深入）”；
四个角分别设圆角时顺序别搞反
border-radius 四值写法是顺时针：左上 → 右上 → 右下 → 左下（TL → TR → BR → BL），不是“上右下左”这种 margin 习惯。容易踩的坑：
- 写成
border-radius: 4px 8px 12px 6px是对的；写成border-radius: 4px 12px 8px 6px就会让右下角变小、右上角变大，视觉错位 - 只写两个值（如
border-radius: 4px 8px）时，第一个是左上+右下，第二个是右上+左下——这个逻辑和 padding/margin 完全不同，别凭经验套用 - 想做胶囊形按钮（比如搜索框右侧带圆角），直接用
border-radius: 0 24px 24px 0，比用clip-path更稳妥，热区、阴影、打印都同步
hover 动效加 transition 但别碰 all
圆角变化加过渡很自然，但千万别写 transition: all .2s。它会把颜色、阴影、甚至 layout 触发的重排都拖进动画队列，卡顿明显。正确做法是只过渡需要的属性：
button {
border-radius: 4px;
transition: border-radius .2s ease;
}
button:hover {
border-radius: 8px;
}
另外注意：border-radius: 0 → 50% 在 Chrome 中可能有轻微闪烁，换成 999px 更稳（浏览器自动 cap 到最大可取值）。如果按钮还带背景色变化，建议把 background-color 单独加进 transition 列表，而不是依赖 all。
真正容易被忽略的是焦点环（outline）——浏览器默认 outline 是直角矩形，会盖住你调好的圆角。别关掉它，用 outline-offset: -2px 往内缩，或改用 box-shadow 模拟焦点环，既保可访问性又贴合视觉。
