border会撑大元素尺寸是因为默认box-sizing: content-box使width仅含内容区，border额外叠加；改用box-sizing: border-box可让width包含border和padding，推荐全局设置, ::before, *::after{box-sizing:border-box}。
border 会撑大元素实际尺寸
当你给一个 div 设置 width: 200px 和 border: 5px solid red，它的总占用宽度其实是 210px（左右各+5px），前提是使用默认的 box-sizing: content-box。这是最常被忽略的“视觉错觉”来源：明明写了 200px，但相邻元素却挤开了。
解决办法是统一加 box-sizing: border-box —— 这样 border 就算在 200px 内部消化，不额外撑开。但要注意：这个声明必须显式写，不能依赖浏览器默认（IE8+ 支持，但旧项目可能漏）。
- 检查是否已全局重置：
* { box-sizing: border-box; } -
border的宽度、样式、颜色都会影响渲染，但只有宽度参与尺寸计算 - 用
getComputedStyle(el).width查到的是计算后值，不是你写的原始width
outline 完全不占布局空间
outline 是画在元素“外面”的装饰线，不影响盒模型，也不触发重排（reflow）。哪怕你写 outline: 10px dashed blue，父容器不会为它留空，兄弟元素也不会被推开。
但它有副作用：焦点态下浏览器自动添加的 outline 可能遮挡内容或破坏对齐，而 outline-offset 可以微调距离（正值向外偏移，负值向内——但负值可能裁剪）。
立即学习“前端免费学习笔记（深入）”；
-
outline不支持圆角（border-radius对它无效） - 无法单独设置某一边（没有
outline-top这种属性） - 打印时默认不显示，如需保留要加
@media print { outline: 1px solid #000; }
box-shadow 默认也不影响布局，但有陷阱
box-shadow 默认是“绘制层叠”，不改变元素尺寸、不参与文档流。但有两个关键例外：
- 当使用
inset关键字时，阴影会向内投射，虽不撑大尺寸，但可能遮盖内容（比如盖住文字或子元素） - 阴影的
spread值为正时，视觉上变“厚”，但依然不占空间；可一旦配合z-index或transform，容易误判层级关系 - 性能敏感场景（如滚动列表）慎用大范围模糊半径（
blur-radius > 20px），某些低端设备会掉帧
验证方法很简单：打开 Chrome DevTools → Elements 面板 → 点击右上角“Toggle element screenshot”，看蓝色高亮框是否包含阴影区域——它不会。
三者叠加时的渲染顺序和干扰点
它们的绘制顺序是固定的：border 最底层 → box-shadow 居中 → outline 最顶层（且永远在所有内容之上）。这意味着：
-
outline可能盖住box-shadow的边缘，尤其当两者颜色相近时，看起来像“阴影断了一截” -
border-radius只影响border和box-shadow（inset也遵循），但对outline无效 - 用
clip-path或overflow: hidden裁剪时，border和内容一起被裁，box-shadow会被裁（取决于是否超出边界），但outline永远不被裁——它压根不算元素的一部分
真正难调试的，往往是 outline 和 box-shadow 在高对比度模式或 Windows 高DPI缩放下的像素对齐偏移，这时得靠截图比对，不能只信预览。
