box-shadow实现多重边框颜色不生效，主因是模糊半径未设为0或偏移量非零未配对；需每层设0 0 0 spread color，扩散值严格递增且全为正数，才能呈现清晰分层色边框。
box-shadow 实现多重边框时颜色不生效？检查模糊值和偏移量
直接给 box-shadow 设多层但只看到一层色？大概率是模糊半径没设为 0，或者水平/垂直偏移写成了非零却没配对。CSS 的 box-shadow 每一层必须显式声明「水平偏移、垂直偏移、模糊半径、扩散半径、颜色」，缺一不可；模糊值只要大于 0，边缘就会晕开，颜色叠加后视觉上就“糊成一片”，看不出分层。
- 要纯硬边，每层的模糊半径必须是
0 - 想往外扩出清晰边框，扩散半径（spread radius）得是正数，比如
2px；负数会向内收缩，容易被内容遮住 - 多层阴影顺序是从上到下渲染，第一层最靠里，最后一层最靠外——别把深色放最外层又指望它不盖住浅色内层
怎么写才能让三层边框各自颜色分明？
关键不是层数多，而是每层的扩散半径严格递增，且偏移全为 0。例如要 2px 宽的三重边框，可分别设扩散为 2px、4px、6px，这样每层刚好紧贴外扩，互不重叠又不留缝。
div {
box-shadow:
0 0 0 2px #ff6b6b,
0 0 0 4px #4ecdc4,
0 0 0 6px #45b7d1;
}
- 所有偏移都是
0 0，确保居中不歪斜 - 扩散值必须严格递增且差值一致（如 +2px），否则会出现断层或重叠错位
- 颜色顺序对应从内到外，别把最外层颜色写在第一个
border 和 box-shadow 混用时为什么边框“变粗了”或位置偏移？
因为 border 占据元素盒模型的 border-box 空间，而 box-shadow 是绘制在元素之外的图层，不占布局空间——但人眼会把它们当“一起的边框”看。一旦同时设置 border 和外扩 box-shadow，视觉厚度就叠加了，还可能因 box-sizing 设置不同导致尺寸理解错乱。
- 如果用了
box-sizing: border-box，再加border: 2px solid，那box-shadow的2px扩散就会从 border 外缘开始算，实际总宽度 = content + border + shadow，容易撑破容器 - 更稳妥的做法是：关掉
border，全用box-shadow控制多层；或只用border+ 一层box-shadow做强调，别混三层以上 - 调试时临时加
outline: 1px dashed red能快速看出真实边界在哪
IE 或旧版 Safari 不支持多层 box-shadow 怎么办？
IE10+ 和 Safari 6.1+ 都支持多层 box-shadow，但 IE9 及更早版本完全不支持，Safari 5.1 只支持单层。如果你的项目还需兼容这些老环境，别硬扛——box-shadow 本就是装饰性属性，降级方案应优先考虑视觉一致性而非功能等价。
- 对 IE9-，可用
filter: progid:DXImageTransform.Microsoft.Shadow(...)，但仅支持单层、语法难控，实际意义不大 - 更现实的是：用
@supports (box-shadow: 0 0 0 1px)包裹多层规则，老浏览器自动跳过，再单独写一层border保底 - 真要强兼容多色边框，只能用伪元素（
::before/::after）层层叠，但维护成本高，且圆角、透明背景下易露馅
0，结果调半天发现只是阴影“化开”了。颜色分明的前提，是每一层都足够“硬”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
