border-radius 仅视觉裁剪不改变盒模型尺寸，width/height等布局属性不变；圆角与 background-clip、overflow、box-shadow 等协同作用可能引发视觉错位或布局误解，需结合实际场景调试。
border-radius 本身不改变盒模型的尺寸计算
设置 border-radius 不会让元素的 width、height、padding 或 border 的数值发生任何变化，浏览器仍按原始矩形区域进行布局计算。圆角只是「视觉裁剪」——就像给一个标准盒子贴了张带弧度的蒙版，底层盒模型（content-box / border-box）完全没被修改。
这意味着：
-
margin和相邻元素的间距关系不受border-radius影响 -
position: absolute的top/left仍基于原始矩形左上角 - 使用
box-sizing: border-box时，border-radius不挤占 content 区域
但圆角可能间接引发布局问题
虽然尺寸不变，但视觉溢出或交互区域错位会让人误以为“布局变了”。典型场景包括：
- 子元素（如图片、文字）超出圆角边界被裁剪，看起来像位置偏移 —— 实际是
overflow: hidden（默认未设）或父容器未设导致；可显式加overflow: hidden统一裁剪行为 - 带
border+ 大border-radius时，边框实际绘制区域变小，但 border 占用的空间（参与 layout）仍按直角矩形算，容易和设计稿对不上 - 使用
transform: scale()或zoom后再加圆角，可能因渲染精度导致像素级锯齿或边缘模糊，影响视觉对齐判断
border-radius 与 background-clip 的配合很关键
当元素有背景色或背景图时，圆角是否「切掉背景」取决于 background-clip 的值（默认是 border-box）。若设为 padding-box 或 content-box，而 border-radius 又大于对应区域尺寸，就会出现背景未被圆角覆盖的尴尬白边。
立即学习“前端免费学习笔记（深入）”；
