border-radius仅视觉裁剪背景，不改变盒模型尺寸：width/height、padding-box/border-box均不变，子元素仍按矩形布局；背景色/图/阴影被裁剪，但盒子本身仍是方形。
border-radius 会裁剪背景但不改变盒模型尺寸
直接说结论：border-radius 只影响渲染层的视觉裁剪，不会缩小元素的 width/height、不改变 padding-box/border-box 尺寸、也不影响子元素布局流。背景图、背景色、阴影都会被圆角“切掉”，但盒子本身还是方的。
常见错误现象：给一个 div 设了 width: 200px; height: 100px; border-radius: 50%;，以为它变成了“真正的圆形容器”，结果里面放的子元素（比如文字或图片）依然按 200×100 的矩形区域排布，甚至溢出到圆角外——这是因为 border-radius 不是 clip-path，它不参与 layout 计算。
- 使用场景：做头像、卡片、按钮等需要视觉圆角但需保持内部对齐稳定的场合
- 性能影响：纯 CSS 圆角几乎无渲染开销；但若配合
overflow: hidden裁剪子元素，则可能触发额外光栅化（尤其在 Safari 中） - 兼容性：所有现代浏览器支持，IE9+ 支持基础值，但
border-radius: 50%在 IE9–10 中对非正方形元素行为不稳定
background-image 被圆角裁剪的边界在哪
border-radius 裁剪背景的参考点是 border-box 的角，但具体裁剪范围取决于 background-clip 和 background-origin 的组合。
默认情况下：background-clip: border-box + background-origin: padding-box，意味着背景绘制从 padding 区开始，但裁剪框是 border 外边缘——所以即使有 padding，圆角也从 border 外沿起算，背景图可能被多裁掉一圈。
立即学习“前端免费学习笔记（深入）”；
- 想让背景图刚好贴着圆角边缘显示？设
background-clip: padding-box - 想让渐变背景不被圆角“吃掉”边缘？避免用
background-origin: border-box（它会让背景延伸到 border 下，更容易被裁） - 注意：CSS 背景裁剪只作用于背景层，不裁剪 border、box-shadow 或子元素
overflow: hidden 和 border-radius 组合的陷阱
很多人用 overflow: hidden 配合 border-radius 来“强制裁剪子元素”，但这不是万能解法，且容易出错。
典型错误：给父容器设 border-radius: 12px; overflow: hidden;，里面放一张大图，结果图片边缘还是直角——因为图片默认 display: inline，会受行内基线影响，导致底部留白，实际裁剪位置偏上。
- 必须确保子元素是块级或设置了
display: block，否则overflow对行内内容裁剪不可靠 - Flex/Grid 容器中，
overflow: hidden对 align-items/justify-content 的对齐基准无影响，子项仍按原始尺寸计算位置 - 在某些安卓 WebView 或旧版 Safari 中，
overflow: hidden+border-radius可能导致硬件加速失效，出现闪烁或模糊
真正需要裁剪内容时，该用 clip-path 还是 border-radius
如果目标是「让子元素也严格遵循圆角形状」，border-radius 不够用，得换 clip-path。
区别很实在：border-radius 是装饰性圆角，clip-path 是几何级裁剪路径。例如 clip-path: circle(50% at center) 会把整个元素（含 border、子元素、阴影）都切成真圆。
-
clip-path兼容性略差：Chrome/Firefox/Edge 102+ 没问题，Safari 15.4+ 开始支持circle()/inset()，但旧 Safari 需要-webkit-clip-path前缀 - 性能上，
clip-path比border-radius开销稍高，频繁动画时建议用will-change: clip-path提示渲染器 - 别混用：
border-radius和clip-path同时存在时，clip-path优先级更高，border-radius的视觉效果会被覆盖
复杂点在于：圆角裁剪不是原子操作，它依赖多个属性协同生效，而开发者常只改 border-radius 就以为万事大吉。背景怎么贴、子元素要不要露、动画是否卡顿——每个细节都得单独验证，不能凭感觉。
