border-radius 不改变盒模型的 width/height 计算值，它仅裁剪边框和背景的绘制路径，布局仍按原始矩形进行；子元素定位、事件检测、溢出判定均基于该矩形，outline 保持矩形，box-shadow 随圆角渲染。
border-radius 不改变盒模型的 width/height 计算值
直接回答：border-radius 本身不会影响元素的 width、height、padding、border 或 margin 的计算逻辑，它只作用于边框（及背景）的**绘制路径**，不参与盒模型尺寸计算。浏览器仍按矩形区域进行布局、溢出判定和事件命中检测。
这意味着：box-sizing: border-box 下设置 width: 200px; border-radius: 50px;，该元素在文档流中依然占据 200×200px 的矩形空间；只是四个角被“切掉”了视觉部分，并非物理收缩。
视觉裁剪 vs 布局占位：为什么感觉“变小”了？
常见错觉来源是视觉焦点偏移或内容被圆角“吃掉”——比如子元素未做适配，文字紧贴边缘时被圆角区域遮挡，误以为容器缩了。实际是渲染层的视觉裁剪，而非 layout 尺寸变化。
- 背景（
background-color或background-image）会被border-radius裁剪，但裁剪区域仍在原盒模型内 - 子元素若使用
position: absolute且top: 0; left: 0，其左上角仍对齐父容器的**原始矩形顶点**，不是圆角弧线起点 -
overflow: hidden会进一步裁剪子元素超出圆角的部分，强化“变小”错觉，但这属于溢出控制，与border-radius本身无关
border-radius 对 box-shadow 和 outline 的影响
box-shadow 默认跟随 border-radius 的形状绘制（除非显式用 inset 或设 border-radius: 0 覆盖），而 outline **永远保持矩形**，且不响应 border-radius —— 这是关键区别。
立即学习“前端免费学习笔记（深入）”；
例如：
div {
width: 100px;
height: 100px;
background: #007bff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
outline: 2px solid red;
}
上面的 div 渲染结果是：内部有圆角蓝块 + 圆角阴影，但外围一圈红色 outline 仍是硬边矩形，且从原始边界向外延伸。
真正影响布局尺寸的“圆角相关”操作
如果你发现加了 border-radius 后周围元素位置变了，大概率不是它本身导致的，而是以下情况之一：
- 启用了
overflow: hidden，导致子元素（如图标、文字）被裁剪，触发了行高重排或 flex/wrap 行为变化 - 同时设置了
border，而border的宽度参与box-sizing计算，容易误归因于border-radius - 使用了
transform: scale()或clip-path: circle()等真正改变几何呈现的属性，混淆了因果 - 在某些旧版 Safari 中，
border-radius+backdrop-filter组合可能引发渲染层尺寸误判（极少数，已基本修复）
要验证是否真由 border-radius 引起，最简单方法是临时注释掉它，观察 layout shift 是否消失 —— 如果没变，说明问题在别处。
