关键是要设blur为0、偏移为0 0，用spread值累积控制每层厚度，如0 0 0 2px #000, 0 0 0 4px #999；顺序决定层级，外圈写后；圆角需统一且避免小数，iOS等真机渲染不稳定时应改用伪元素方案。
box-shadow多层边框怎么写才不糊、不重叠
关键不是堆层数，而是让每层都“硬边+准定位”。box-shadow默认带模糊，一设blur就糊成一团，人眼根本分不清哪层是哪层。
- 所有层的前两个偏移值必须是
0 0，否则会错位 -
blur必须为0，比如0 0 0 3px #000，不是0 0 2px 3px #000 - 靠
spread拉开距离：想三层各宽2px，就得写0 0 0 2px、0 0 0 4px、0 0 0 6px——注意这是累积值，不是每层独立宽度 - 顺序决定层级：逗号左边的在上层，右边的在下层；外圈边框要写后面，否则会被盖住
为什么加了outline或border后box-shadow位置不对
box-shadow的起点是元素的**外边缘**，也就是包含border之后的边界。如果你写了border: 2px solid #000，再加box-shadow: 0 0 0 2px red，红色边框其实是从黑色边框外侧再扩出2px，视觉上紧贴、没间隙。
- 要留空隙，
spread得更大，比如0 0 0 6px red（黑边2px + 空隙2px + 红边2px） -
outline不参与盒模型，它画在哪、是否溢出，完全不受box-shadow控制，混用容易在缩放时出现1px抖动 - 调试时可临时加
outline: 1px dashed green，看清真实外边界在哪
圆角+多重边框时边缘发直或断裂
设置了border-radius，但box-shadow层叠后外圈还是直角？这不是bug，是渲染限制：box-shadow的圆角由元素自身半径决定，但多层叠加时中间层可能因像素对齐偏差露出尖角。
- 所有
box-shadow层必须用相同border-radius，且值不能是小数（如5.5px），否则iOS Safari易断裂 - 避免用
inset和非inset混写，box-shadow: inset 0 0 0 2px #000, 0 0 0 4px #999在旧版Safari中可能只渲染其中一层 - 真要保圆角精度，改用伪元素：
::before和::after各自设border-radius，比纯box-shadow可靠
移动端真机上阴影突然变糊或抖动
iOS Safari 13–14.4对多层box-shadow支持不稳定，尤其动画中或缩放时；Android旧WebView也可能把大blur值渲染成噪点。
立即学习“前端免费学习笔记（深入）”；
- 超过3层就谨慎：人眼难分辨，还可能触发Chrome的
layer overflow警告 - 别在
:hover里动态增减层数，用预设class切换整套样式更稳 - 如果用了
inset内边框，务必测试iOS真机——部分版本会把inset误渲染为外阴影
真正难的不是写出三行box-shadow，而是让它们在不同DPR、不同缩放比例、不同滚动状态下始终清晰对齐。参数调得再准，设备一换，就可能糊边或错位。
