需在tailwind.config.js的theme.extend.boxShadow中定义多层阴影字符串，如'0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.8)'，逗号分隔、空格转义、单位写全、inset显式声明，不可传数组。
tailwind.config.js 里怎么配多层阴影值
直接用 shadow-md 这类预设类只能拿单层或固定双层，真要三段式（边框+近影+远影）或带 inset 的混合效果，必须进配置文件手动扩展 theme.extend.boxShadow。
关键点：值必须是合法的 box-shadow 字符串，逗号分隔每层，空格不能省，单位（px）必须写全，inset 要显式带上。
- 错误写法：
'0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px #fff'（inset前少空格，Tailwind 解析失败） - 正确写法：
'0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.8)' - 别传数组：
['0 2px 4px #000', 'inset 0 1px 2px #fff']会被忽略——Tailwind 只认拼成一个字符串 - 命名随意，但 key 决定类名，比如
card-raised→ 最终用shadow-card-raised
HTML 中怎么写才能不被 Safari 或旧 WebView 丢掉
shadow-[...] 任意值语法在 Safari 15.4 以下、旧版 Android WebView 里极脆，不是报错，而是静默丢弃整条声明。常见触发条件：含多个 rgba()、用了 inset、模糊半径超过 40px。
- 逗号后必须接空格或下划线：
shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_4px_8px_rgba(0,0,0,0.06)] - 所有空格必须转义为下划线，包括颜色函数里的逗号前后（
hsla(240,100%,70%,0.6)不能写成hsla(240_100%_70%_0.6)） - 禁用 CSS 变量计算式：
hsl(var(--primary), 0.3)会解析失败，只允许var(--primary-500)这种直引 - 移动端慎用大模糊：
shadow-[0_32px_96px_-24px_rgb(0_0_0_/_0.32)]在低端机上可能滚动掉帧
hover/focus 切换阴影为什么没过渡动画
写了 hover:shadow-card-lg 却跳变，大概率不是类名问题，而是缺了三样东西：
立即学习“前端免费学习笔记（深入）”；
- 没启用
transition-shadow：只写transition不生效，得在theme.extend.transitionProperty里加'shadow': 'box-shadow' - 没配持续时间：
duration-200或duration-300比较合理，duration-500在按钮上反馈太慢 - 父容器设了
overflow-hidden：阴影直接被裁掉，尤其内阴影对这个最敏感，记得检查是否漏掉overflow-visible - 状态类必须和基础类共存：
shadow-card-sm hover:shadow-card-lg，两个 key 都得在配置里定义好
内阴影（inset）为什么看不见
shadow-inner 是 Tailwind 提供的固定内阴影，但它默认值很淡（inset 0 2px 4px -2px rgba(0,0,0,0.1)），且严重依赖背景对比度。
- 纯白底 +
shadow-inner= 基本不可见，务必加一层浅灰背景，比如bg-gray-50 - 元素要是空的且没设
height/min-height/p-4，渲染区域为 0，阴影无处可绘 - 别指望
shadow-inner-sm这类变体存在——Tailwind 默认只提供shadow-inner一个档位，要更多强度得自己配，比如inner-strong: 'inset 0 4px 8px -2px rgba(0,0,0,0.2)' - Safari 旧版本对
inset+ 大圆角组合渲染不稳定，边缘可能断裂，测试时别只看 Chrome
spread 值控制阴影收缩、inset 必须显式声明、以及 Safari 对逗号后空格的苛刻要求——少一个下划线，整条就废。 
