border-radius需带单位（如8px）才生效，50%仅在宽高相等时生成正圆；需配合overflow:hidden裁剪内容、处理outline焦点环、确保热区足够，且注意UI框架样式覆盖问题。
直接用 border-radius 就能做，但不设宽高、不处理焦点、不考虑热区，做出来大概率是“看起来像圆角，点起来不像按钮”。
border-radius 值怎么写才生效
必须带单位（px、rem、%），光写数字会失效：border-radius: 8 ❌，border-radius: 8px ✅。百分比值（如 50%）只在宽高相等时生成正圆；若宽高不等，会出椭圆角——这不是 bug，是设计行为。
常见错误：
- 父容器设了
overflow: hidden，把圆角裁掉了 - 按钮有默认
border，边框和圆角不匹配，视觉割裂 - 用了 UI 框架（比如 Bootstrap），它的重置样式覆盖了你的
border-radius，得加!important或提高选择器权重
圆形按钮必须满足的三个硬条件
想让 border-radius: 50% 真正画出正圆，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
width和height必须严格相等（比如都设48px） - 不能依赖
padding撑开尺寸——padding 只增加内容区，不改变盒模型宽高 - 避免用
min-width/max-width单独控制，它们可能打破等比关系
如果需要响应式圆形按钮，优先用 aspect-ratio: 1 / 1（Chrome 88+、Firefox 89+、Safari 15.4+ 支持），再配 border-radius: 50%；老浏览器降级为固定像素宽高。
焦点状态破坏圆角怎么办
浏览器默认的 outline 是直角矩形，会盖住你调好的圆角，尤其在 Chrome/Firefox 中非常明显。别全局关 outline: none——这等于放弃键盘可访问性。
正确做法是：
- 保留
outline，但用outline-offset: -2px往内缩，让它贴合圆角边缘 - 或改用
box-shadow模拟焦点环：box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，它天然遵循border-radius - 更推荐组合写法：
:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
圆角按钮的点击热区容易被忽略
border-radius 只是视觉裁剪，不影响实际点击区域——鼠标进入元素原始矩形框（含四个尖角）依然能触发 click。但如果你用了 clip-path 或 mask，热区就真被切了。
验证方法很简单：临时加一句 outline: 2px solid red，看焦点框是否贴合圆角边缘。另外，触控设备要求热区不小于 44px × 44px，可通过 padding 扩展，再用 overflow: hidden 隐藏溢出部分。
真正麻烦的是中间项圆角叠加、伪元素遮挡文字、IE11 下 background-clip: padding-box 导致圆角内露白边——这些细节不测到真机或旧浏览器，很容易漏掉。
