border-radius 与 border 宽度不匹配时圆角会失效，因内半径=外半径−边框宽度，结果≤0则退化为直角；需确保 border-radius ≥ border-width 的2倍，并配合 overflow: hidden 防子元素溢出。
border-radius + border 宽度不匹配导致圆角失效
当 border 宽度较大（比如 border: 4px solid #333），而 border-radius 值小于边框宽度一半时，浏览器会退化为斜角或直角——这不是 bug，而是规范行为：圆角内半径 = 外半径 − 对应边框宽度。若结果 ≤ 0，就失去弧度。
- 安全做法：设
border-radius≥border-width的 2 倍（例如border: 2px→ 至少border-radius: 4px） - 胶囊形按钮？确保高度固定，再设
border-radius≥ 高度一半（如height: 40px→border-radius: 20px） - 避免用
border-radius: 50%配非正方形元素，长宽比失衡时会拉成椭圆，视觉上像“被裁”
子元素溢出覆盖圆角视觉效果
圆角只裁剪元素自身的背景和边框，不自动裁剪子元素。常见于按钮里嵌了 <i></i> 图标、绝对定位文字、或图片未约束尺寸，导致边缘“撑出”圆角范围。
- 必须加
overflow: hidden到父容器（如<button></button>）才能真正裁剪子内容 - 但注意：
overflow: hidden也会剪掉position: absolute子项超出部分（比如气泡箭头），需配合transform: translate()微调位置 - Flex/Grid 子项若设了
align-self: stretch，在overflow: hidden下可能被意外截断，改用max-height或flex-shrink: 1更稳妥
outline 或 box-shadow 干扰圆角显示
outline 默认不跟随 border-radius，会画出一个直角轮廓框，盖住圆角边缘；box-shadow 若用了 inset 或模糊值过大，也可能让圆角看起来“发虚”或被遮挡。
- 禁用
outline：加outline: none或用box-shadow模拟聚焦效果（如box-shadow: 0 0 0 2px rgba(0,123,255,0.25)） - 检查
background-clip：默认是padding-box，没问题；若误设为border-box，背景会延伸到边框区域，盖住圆角 - 慎用
transform: scale()或zoom，某些 WebView 会触发渲染异常，圆角锯齿或错位
border-radius 动画过渡时边缘抖动
给 border-radius 加 transition 后，过渡中出现边缘闪烁或裁切跳变，通常不是动画本身问题，而是 overflow: hidden 与子内容重绘节奏不同步造成的视觉假象。
- 确保起止值单位一致：不要混用
px和auto、initial等不可插值的值（border-radius: 0 → 8px✅，0 → auto❌） - 四值写法要严格对应：从
border-radius: 4px 8px 12px 16px→8px 12px 16px 20px才平滑；若起点是单值、终点是四值，浏览器无法映射插值路径 - 如果用了
overflow: hidden，且子元素（如图标）尺寸在动画中变化，建议把动画逻辑移到transform上（如缩放图标），而非依赖圆角裁剪
border-radius 计算值，而不是只盯 CSS 规则；很多“没生效”其实是样式被更具体的规则覆盖，或者父容器没设 overflow: hidden 导致子内容溢出掩盖了效果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
