Tailwind 中多层阴影需用 shadow-[...] 语法拼接，Safari 15.4 以下及 Android WebView 对 box-shadow 解析弱，须避免 inset、多个 rgba() 或模糊半径＞40px；逗号后需空格或下划线，spread-radius 不可省略，单位 px 必须显式写出，禁用嵌套 CSS 函数；theme.extend.boxShadow 仅支持对象映射，多层须合并为单字符串；深色模式需单独定义 key；hover/focus 阴影过渡需启用 transition-shadow、指定 duration 且父容器不能 overflow-hidden；每层阴影应符合光线逻辑以保立体感。
直接用 shadow-[] 任意值语法拼接多层，别指望 shadow-md + shadow-lg 叠加生效——Tailwind 不支持类名叠加阴影，只会取最后一个。
shadow-[] 里怎么写多层阴影才不被 Safari 静默丢弃
旧版 Safari（15.4 以下）、Android WebView 对 box-shadow 解析极弱，含 inset、多个 rgba() 或模糊半径 >40px 时整条声明会被跳过，控制台零报错。
- 逗号后必须跟空格或下划线：
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.06)]，少下划线会断句失败 -
spread-radius不能省：哪怕为0，也得显式写出，如0_2px_4px_0_rgba(0,0,0,0.1) - 单位必须全写：
px不可省略，0 2 4 0这种无单位写法直接失效 - 避免嵌套 CSS 函数：
hsl(var(--primary), 0.3)会解析失败，只允许var(--primary-500)这类原始变量引用
theme.extend.boxShadow 配置多层时的硬约束
Tailwind 的 theme.extend.boxShadow 只接受对象映射，传数组会被忽略——不是 bug，是设计如此。
- 错误写法：
card: ['0 2px 4px #000', 'inset 0 1px 2px #fff']→ 构建时静默跳过 - 正确写法：把多层拼成单个字符串，用英文逗号连接：
card: '0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.8)' - key 名决定最终类名：
card→shadow-card，别在 value 里塞前缀 - 深色模式需单独定义：
cardDark: '…'→ 再用dark:shadow-cardDark，不能复用同一 key
hover/focus 切换多层阴影为什么没过渡动画
写了 hover:shadow-card-lg 却跳变，问题不在类名，而在三处缺失：
立即学习“前端免费学习笔记（深入）”；
- 必须显式启用
transition-shadow：在theme.extend.transitionProperty里加shadow，只写transition不生效 - 搭配具体时长：
duration-200或duration-300，duration-500在按钮上反馈太慢 - 检查父容器是否设了
overflow-hidden：阴影会被直接裁掉，尤其是内阴影对裁剪极其敏感 - 状态类必须与基础类共存：
shadow-card-sm hover:shadow-card-lg，两者都得在配置里定义好
最易被忽略的是：多层阴影的每一层都依赖真实光线逻辑——偏移小+模糊小=近光，偏移大+模糊大=远光。随便堆叠数值，视觉上反而会“塌”，而不是“浮”。
