border-radius仅视觉裁剪背景和边框内侧，不改变盒模型尺寸或布局流；子元素仍按原始矩形区域排布，溢出圆角需配合overflow:hidden等手段控制。
不会。 border-radius 只作用于渲染层，不参与任何 layout 计算——它既不改变 width/height，也不影响 padding-box 或 border-box 的尺寸，子元素布局完全按原始矩形区域进行。
为什么子元素会“溢出圆角”
常见错误现象：div 设了 width: 200px; height: 100px; border-radius: 50%;，但里面文字或图片仍按 200×100 的矩形排布，甚至跑到圆角外侧。
-
border-radius不是clip-path，它不裁剪 DOM 布局流，只裁剪背景、边框（仅视觉）、阴影的绘制区域 - 子元素定位、换行、flex/grid 排列，全部基于未圆角化的盒模型边界
- 若需真正限制内容范围，必须配合
overflow: hidden（注意：它裁剪的是整个子树，不是仅圆角区域）
border-radius 和 border 共存时的视觉错觉
加了 border 后圆角“看起来没生效”，往往不是计算问题，而是渲染叠加导致的视觉干扰：
-
border本身不被border-radius裁剪——它是硬边线，圆角只影响其内侧的内容区 - 粗边框（如
border-width: 12px）会让小半径（如border-radius: 4px）完全被掩盖，显得仍是直角 - 解决办法：确保
border-radius ≥ border-width × 1.5，或改用box-shadow模拟边框（支持圆角且不占布局空间）
box-sizing 对 border-radius 渲染基准的影响
box-sizing 不改变 border-radius 的计算逻辑，但会显著影响你“看到的圆角位置”：
立即学习“前端免费学习笔记（深入）”；
-
box-sizing: content-box（默认）下，border-radius从内容区边缘起算，但被padding和border向外推，导致视觉圆角变浅 -
box-sizing: border-box下，border-radius严格以border-box最外沿为基准裁剪，更符合直觉 - 建议全局设置
* { box-sizing: border-box; }，否则在 flex 容器中嵌套圆角元素时，不同浏览器对裁剪起点的解释可能有细微差异
真正容易被忽略的点是：圆角裁剪背景的边界，取决于 background-clip 和 background-origin 的组合。默认 background-clip: border-box + background-origin: padding-box，意味着背景从 padding 区开始绘制，但裁剪框却是 border 外边缘——结果就是背景图常被多裁掉一圈，尤其在有 padding 时。
