使用 box-shadow 模拟不占据盒模型空间的边框，核心在于利用阴影的偏移量（offset）和模糊半径（blur radius）。通过设置水平或垂直偏移量为零，并将模糊半径设为非零值，可以生成紧贴元素边缘的“光晕”，这种光晕在视觉上等同于边框，但不会增加元素的实际尺寸（即不影响 width、height 及盒模型布局）。例如，设置 box-shadow: 0 0 4px red; 会在元素四周生成 2px 宽的红色阴影边框，且该元素仍保持原有宽高。
如何控制阴影边框的宽度和颜色？
要精确控制模拟边框的宽度，需调整 box-shadow 属性中的第三个参数——模糊半径（blur-radius）。该值越大，阴影向外扩散的范围越广。由于阴影是居中对齐于元素边缘生成的，因此实际的单边“边框”宽度等于模糊半径的一半。若希望边框为实色且不透明，通常将第四个参数（spread-radius）设为 0，并配合适当的模糊度以柔化边缘；若需锐利边缘，可将模糊半径设为 0，同时增大 spread-radius。颜色由最后一个参数指定。以下代码演示了如何生成一个宽度为 4px（即模糊半径为 8px）的蓝色实心边框效果：
div {
width: 100px;
height: 100px;
background-color: white;
/* 水平偏移, 垂直偏移, 模糊半径, 扩展半径, 颜色 */
box-shadow: 0 0 8px 0 blue;
}
运行上述代码后，div 元素在视觉上呈现为一个带有 4px 蓝色边框的正方形，但其计算宽度仍为 100px，未因边框而扩大。此方法适用于需要保持布局稳定、避免重排（reflow）的场景，如模态框背景、卡片悬浮效果等。
当多个元素相邻时，阴影边框会重叠吗？
当两个或多个使用 box-shadow 模拟边框的元素相邻放置时，它们的阴影区域会发生重叠。由于阴影默认是向下和向右扩散的（取决于偏移量），但在本例中偏移量为 0，阴影向四周均匀扩散。如果两个元素紧密排列（无间距），它们的阴影会在接触面叠加，导致该处的视觉颜色加深或混合。例如，两个白色方块紧挨着，各自拥有 4px 宽的红色阴影边框，它们在中间接触的区域会显示为更深的红色，因为两个阴影层叠在一起。这种行为与真实边框不同：真实边框通常有明确的边界线，而阴影是半透明或可叠加的光效。若希望避免重叠导致的颜色加深，可为相邻元素设置负外边距（negative margin）或使用 z-index 控制层级，或者改用 outline 属性（同样不占空间但行为略有差异）。
/* HTML结构 */
<div style="display: flex;">
<div class="shadow-box"></div>
<div class="shadow-box"></div>
</div>
/* CSS样式 */
.shadow-box {
width: 50px;
height: 50px;
background: white;
box-shadow: 0 0 4px red;
}
在此示例中，两个 .shadow-box 元素并排显示，中间接缝处因阴影重叠而呈现更浓的红色。这验证了阴影边框在相邻场景下的叠加特性，开发者需注意此视觉效果是否符合设计预期。
基于box-shadow的模糊半径参数，具体能生成多宽的边框？
基于 box-shadow 的模糊半径参数，具体能生成的边框宽度等于该半径值的一半。这是因为 box-shadow 的模糊效果是以元素边缘为中心向内外两侧对称扩散的。例如，若设置 box-shadow: 0 0 10px black;，则模糊半径为 10px，阴影从边缘向内和向外各延伸 5px，因此可视的“边框”宽度为 5px。这一关系是固定的，不受浏览器实现影响。开发者可通过直接修改模糊半径值来线性调整模拟边框的粗细，无需担心盒模型尺寸变化。需要注意的是，过大的模糊半径可能导致性能下降，尤其在大量元素应用时，应权衡视觉效果与渲染开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
