圆角按钮需综合考虑宽高、溢出、边框、框架覆盖及设备兼容性；border-radius必须带单位或百分比，顺序与取值影响角效果，且常因overflow、默认边框、框架重置或旧版safari渲染问题导致“不生效”。
圆角按钮不是加个 border-radius 就完事，多数“不生效”或“看起来怪”问题都出在宽高、溢出、边框或框架覆盖上。
border-radius 值怎么写才不被忽略
没单位就失效，border-radius: 8 是无效写法，必须是 border-radius: 8px 或 border-radius: 4%；百分比值只在宽高相等时生成正圆，否则是椭圆角——这不是 bug，是按规范渲染。
-
border-radius: 8px→ 四角统一，适合常规按钮 -
border-radius: 8px 12px→ 上下角 8px，左右角 12px -
border-radius: 4px 8px 12px 16px→ 顺时针：左上、右上、右下、左下，顺序错一个角就“长歪” -
border-radius: 50%→ 必须配合等宽高等尺寸才成正圆，否则是胶囊形或椭圆
为什么写了 border-radius 还是直角
真正原因往往不是 CSS 写错了，而是被其他样式压制或裁剪：
- 父容器或按钮自身设了
overflow: hidden，而圆角超出盒模型边界，直接被裁掉 - 按钮有默认
border（比如 Chrome 的 2px 虚线），边框压住圆角边缘，加border: none或border: 1px solid transparent即可 - 用了 Bootstrap、Tailwind 等框架，它们的 base style 清掉了圆角，得用更高权重覆盖，例如
.my-btn:not([disabled]) { border-radius: 8px !important; } - 旧版 Safari 对
button元素的border-radius支持不稳定，加-webkit-appearance: none强制重置渲染
hover 动效和焦点环怎么不破坏圆角
过渡动画和焦点样式若处理不当，会盖住甚至“吃掉”圆角视觉效果：
- 只过渡需要的属性：
transition: border-radius .2s ease，别用transition: all，否则拖慢重排重绘 - 浏览器默认
outline是直角矩形，会覆盖圆角；保留可访问性做法是：:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }，阴影天然贴合border-radius - 从
0到50%过渡在 Chrome 中可能闪烁，换成999px更稳妥（浏览器自动 cap 到最大值）
移动端和正圆按钮的硬约束
响应式场景下，“看着圆”和“真能点准”是两件事：
- 做正圆按钮（如头像、操作图标），必须同时满足：
width和height相等、border-radius: 50%、无干扰padding或line-height；仅靠aspect-ratio: 1 / 1需注意兼容性（Safari 15.4+ 才支持） - 触控热区不能小于 44×44px，靠
padding扩展尺寸后，用overflow: hidden隐藏溢出文字或图标，但别误删点击区域 - iOS 16.5 之前 Safari 对非对称圆角（如
border-radius: 24px 0 0 4px）可能把小半径角渲染为直角，真机测试比模拟器更可靠
真正麻烦的不是语法，而是圆角和宽高、边框、溢出、焦点、框架、设备渲染策略之间的连锁反应——改一处常要同步检查五处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
