box-shadow可模拟多重边框但非真边框，不占布局、不响应border-radius、不支持虚线；三重边框需用0 0 0 npx color逗号分隔，按内到外顺序设置累积扩展值，避免覆盖；内边框用inset，圆角下需确保spread≤border-radius或改用伪元素。
box-shadow 能模拟多重边框，但不是真边框——它不占布局、不响应 border-radius、不能设虚线，仅适合视觉替代。
用逗号分隔多层 shadow 实现三重边框
核心是每层用 0 0 0 Npx color 表达“无偏移 + 无模糊 + 扩展 Npx”，顺序从内到外写，spread-radius 是累积值：
- 要三层各宽
2px，得写成：box-shadow: 0 0 0 2px #333, 0 0 0 4px #eee, 0 0 0 6px #999 - 别写成
2px, 2px, 2px，否则第二层会覆盖第一层视觉效果 - 想加内边框？把
inset 0 0 0 2px #666放最前面，例如：box-shadow: inset 0 0 0 2px #666, 0 0 0 4px #ccc - 移动端 Safari 13–14.4 对多层
inset渲染不稳定，此时必须换伪元素方案
圆角下 box-shadow 容易断裂，怎么稳住
box-shadow 默认不跟随 border-radius 弯曲；边缘露直角是因为 spread-radius 太大：
- 确保
spread-radius ≤ border-radius，比如border-radius: 6px时，最大用6px扩展值 - 若需更宽外圈又保圆角，改用伪元素（
::before）+border-radius+z-index分层 - 发光类效果（如
0 0 4px 8px rgba(0,0,0,0.1)）可单独设模糊值，但别让blur>spread，否则边缘发虚
border 和 box-shadow 混用时的尺寸干扰
真实 border 改变盒模型尺寸，box-shadow 起点是元素外边缘（含 border），这点常被忽略：
- 给
width: 200px; border: 2px solid #000;加box-shadow: 0 0 0 2px red，红边紧贴黑边，看起来像 4px 黑边——因为红色是从黑边外侧再扩 2px - 要留间隙，必须加大
spread-radius，例如0 0 0 6px red（即从黑边外再扩 6px） - 调试时可用
outline: 1px dashed green标出元素真实边界，确认 shadow 是否按预期延展 - Flex/Grid 布局中，
box-shadow不影响子项排列，border可能触发重排
真正需要点击热区、独立 hover、或混合虚/实线样式时，box-shadow 就不够用了——它不响应鼠标事件，也没法拆成可交互的 DOM 层。这时候得切回伪元素或嵌套容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
