box-shadow 比 border 更灵活地实现多重边框，支持内外层独立控制、CSS 变量统一管理、响应式调整，但需注意圆角适配、IE 兼容性及性能陷阱。
用 box-shadow 模拟多重边框比 border 更灵活
纯 CSS 的 border 只能定义一层实线、虚线或双线，想实现内外两层不同颜色/宽度的边框，硬套 border 会卡在「无法独立控制内外边距间隙」上。这时候 box-shadow 是更可控的选择——它本质是绘制投影，但设为 0 0 0 Npx color 就等效于“向外撑开一层纯色环”，还能叠多层。
- 内边框用
inset：比如box-shadow: inset 0 0 0 2px #333 - 外边框用普通投影：比如
box-shadow: 0 0 0 4px #ff6b6b, 0 0 0 8px #4ecdc4 - 注意顺序：CSS 中靠前的
box-shadow在视觉上更靠近元素，想让最外层边框“盖住”中间层，就得把它写在最后 - 不支持圆角裁剪：如果元素有
border-radius，box-shadow默认不会跟着变圆；需加border-radius到自身，并确保阴影扩散值 ≤ 圆角值，否则边缘会露直角
用 CSS 变量统一管理多重边框参数
把每层边框的宽度、颜色、偏移封装成变量，改一处就能同步更新所有实例，避免散落各处的魔法数字。关键是命名要直白，比如 --border-outer-width 比 --bd-w1 更容易回溯。
- 定义变量建议放在
:root或组件级选择器里：:root { --border-inner-width: 2px; --border-inner-color: #666; --border-outer-width: 4px; --border-outer-color: #e74c3c; } - 调用时直接拼接：
box-shadow: inset 0 0 0 var(--border-inner-width) var(--border-inner-color), 0 0 0 var(--border-outer-width) var(--border-outer-color) - 变量不能直接参与计算（如
calc(var(--border-outer-width) * 2)在旧版 Safari 会失效），宽度类数值建议提前算好再定义变量 - 如果某层边框需要响应式变化（比如移动端缩窄），用
@media重设变量值，比重复写整条box-shadow更干净
遇到 outline 和 border 混用时的层级陷阱
有人想用 outline 当第二层边框，结果发现它总压不住内容、也不随 border-radius 弯曲。这不是 bug，是规范行为：outline 不占布局空间、不响应圆角、且渲染层级固定在元素上方但低于 box-shadow。
-
outline永远不能替代box-shadow实现真正“包裹式”多重边框 - 如果必须用
outline（比如聚焦态高亮），记得加outline-offset控制距离，否则可能和border粘连甚至重叠 - 调试时用浏览器开发者工具的“Layout”面板看盒模型，确认
outline是否意外遮挡了交互区域（它不可点击，但视觉上容易误判）
性能与兼容性底线要盯住
box-shadow 多层叠加本身不卡，但一旦配上 filter: blur() 或动画，就容易触发全图重绘。老版本 iOS Safari 对多层 inset 支持不稳定，得实测。
立即学习“前端免费学习笔记（深入）”；
- 超过 3 层
box-shadow且含模糊值时，在低端安卓机上可能出现轻微掉帧 - IE 完全不支持
inset阴影，如果还要兼容，得用伪元素（::before/::after）模拟内边框，但会增加 DOM 节点和维护成本 - CSS 变量在 IE 中无效，若项目需支持 IE，变量方案必须搭配 JS 回退逻辑，或者干脆放弃变量改用预处理器（如 Sass）生成静态值
多重边框看着是视觉细节，但变量怎么拆、阴影怎么叠、兼容怎么兜底——这些地方一不留神就变成线上小雪球。尤其是 inset 阴影和 border-radius 的配合，得真机点开调试器转一圈才放心。
