box-shadow 多层叠加需设 blur=0 才能出硬边，正确写法为每层用 0 0 0 npx color，spread 值累积计算，inset 与非 inset 阴影不可混写，且需统一 border-radius（整数）、真机测试、避免 calc 动态计算 spread。
box-shadow 多层叠加必须设 blur=0 才能出硬边
想用 box-shadow 模拟多重边框，却看到边缘发虚、层次糊成一团？大概率是 blur 值没归零。默认带模糊的阴影会相互渗透，视觉上根本分不清哪层是哪层。
- 正确写法：每层都用
0 0 0 Npx color，比如0 0 0 2px #333, 0 0 0 4px #eee - 错误写法：
0 0 2px 2px #333—— 这里的2px是模糊半径，不是边框厚度 - 注意 spread 是累积值：第二层写
4px，实际外圈宽度是4−2=2px；要三圈各宽3px，就得写3px, 6px, 9px - 顺序决定层级：逗号靠前的在视觉上更靠近元素；最外层边框必须写在最后，否则会被盖住
内边框必须用 inset，且不能和非 inset 混写
inset 和普通 box-shadow 渲染机制不同，混写时旧版 Safari（尤其是 iOS 13–14.4）可能只渲染其中一层，或把 inset 错当成外阴影。
- 安全组合：
box-shadow: inset 0 0 0 2px #666, 0 0 0 4px #ccc - 危险写法：
box-shadow: inset 0 0 0 2px #666, 0 0 0 4px #ccc, 0 0 12px 6px rgba(0,0,0,0.1)—— 第三层模糊阴影容易触发渲染异常 - 圆角适配：所有层共用同一
border-radius，且值不能含小数（如5.5px），iOS 真机会断裂 - 真机测试不可跳过：部分 Android WebView 对
inset支持不稳，建议优先用伪元素 fallback
边框 + 阴影叠加时，box-shadow 起点是 border 外缘
给已有 border 的元素加 box-shadow，却发现红边紧贴黑边、看不出间隙？因为 box-shadow 的起点是元素的外边界——也就是包含 border 后的边缘。
- 要留空隙：若
border: 2px solid #000，想再加 2px 红边且中间留 2px 空隙，spread得设为6px（2+2+2） - 别混用
outline：它不响应border-radius，永远直角；且渲染层级固定，无法精确控制与border的间距 - 调试技巧：临时加
outline: 1px dashed green，看清真实外边界在哪 - Flex/Grid 中注意：
border可能影响子项最小尺寸计算，而box-shadow完全不影响布局
用 CSS 变量管理多层参数，但别在 calc 里动态算 spread
把每层边框宽度、颜色抽成变量确实方便维护，但旧版 Safari 对 calc(var(--width) * 2) 这类表达式支持极差，常导致整条 box-shadow 失效。
- 推荐定义方式：
--border-inner-width: 2px;、--border-outer-width: 6px;，直接写死常用组合值 - 调用时拼接：
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) - 响应式调整：用
@media重设变量值，比重复写整条box-shadow更干净 - 性能提醒：超过 3 层
box-shadow在动画中易掉帧，iOS Safari 有已知抖动问题；别在:hover里动态增减层数
实际最难的从来不是写出三行 box-shadow，而是让它们在不同 DPR、缩放比例、滚动状态甚至键盘聚焦时，始终对齐清晰、不糊边、不露直角。参数调得再准，设备一换，就可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
