box-shadow 能否真正替代多层 border
不能，但多数视觉场景下够用——box-shadow 是投影，不占布局空间、不响应鼠标事件、无法设置圆角独立控制，而 border 是真实边框。如果你要实现「外发光+内描边+中间细线」这种效果，box-shadow 是更轻量且兼容性更好的选择；但若需精确控制每层边框的 border-radius 或需要边框参与点击热区，就得老实用嵌套元素或 outline + border 组合。
用多层 box-shadow 实现三重边框的写法
关键在 box-shadow 的逗号分隔语法和偏移值控制：所有阴影默认偏移为 0 0，靠模糊半径（blur）和扩展半径（spread）向外“撑开”层次。注意顺序是从左到右逐层绘制，后写的在上层。
常见错误现象：box-shadow: 0 0 2px red, 0 0 4px blue 看起来只有一层，因为模糊重叠严重；或者加了正向 spread 却忘了设 blur 为 0，导致边缘发虚。
- 最外层（宽、虚、浅）：
0 0 12px 6px rgba(0,0,0,0.1) - 中层（中等宽度、实色）：
0 0 0 4px #eee - 内层（细、硬边）：
0 0 0 1px #333
完整写法：box-shadow: 0 0 12px 6px rgba(0,0,0,0.1), 0 0 0 4px #eee, 0 0 0 1px #333;
立即学习“前端免费学习笔记（深入）”；
box-shadow 多层叠加时的性能与渲染陷阱
浏览器对 box-shadow 的硬件加速有限，尤其是带大模糊值（如 blur > 20px）或多层高斯模糊时，滚动或动画中容易掉帧。iOS Safari 对超过 3 层 box-shadow 的复合渲染有已知抖动问题。
- 避免在
:hover或@keyframes中动态增减层数，改用 class 切换预设样式 - 如果只是想模拟「双色边框」，优先考虑
border-image或两层div套用border，比 2 层box-shadow更稳 -
spread值为负数会向内收缩，但超出元素内容区后会被裁剪，且无法绕过overflow: hidden限制
border 和 box-shadow 混用时的层级与尺寸干扰
真实 border 会改变元素的 width/height（取决于 box-sizing），而 box-shadow 不影响盒模型。但两者共存时，box-shadow 的起始位置是元素的外边缘（含 border），不是 content box。
典型踩坑场景：给一个 width: 200px; border: 2px solid #000; 的元素加 box-shadow: 0 0 0 2px red，结果红边紧贴黑边，看起来像 4px 黑边——因为红色 shadow 是从黑边外侧再扩 2px，实际总边框厚度是 2px（border）+ 2px（shadow），但视觉上融合了。
- 要让 shadow 和 border 有间隙，必须用正向
spread，例如0 0 0 4px red（从黑边外再扩 4px） - 调试时可用
outline: 1px dashed green临时标出元素真实边界，确认 shadow 是否按预期延展 - Flex/Grid 容器中，
box-shadow不影响子项排列，但border可能触发最小尺寸计算，这点容易被忽略
复杂点在于：你永远没法用纯 box-shadow 实现「内边框」效果（即向内描边），除非配合 inset，但 inset 阴影不支持多层 spread 控制，且和 border 叠加时容易穿帮。
