shadow-[]任意值语法需写为shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1)]，必须显式写出spread-radius（如0）、逗号后用下划线或空格分隔、单位不可省略、避免多rgba或大模糊值，否则Safari 15.4以下会静默丢弃。
shadow-[] 任意值语法怎么写才不崩
直接写 shadow-[0_2px_4px_rgba(0,0,0,0.1)] 看似简单，但 Safari 15.4 以下、旧版 Android WebView 会静默丢弃整条声明——尤其含多个 rgba()、inset 或 >40px 模糊半径时。不是语法错，是解析器不支持。
- 逗号必须用英文半角，且后接空格或下划线：
shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.06)]，少下划线会断句失败 - 单位不能省略：
px必须写全，0 2 4 0 rgba(...)构建时报Invalid boxShadow value -
var(--primary-500)可用，但hsl(var(--primary), 0.3)这类计算式会解析失败 - 避免在 shadow-[] 中嵌套 CSS 变量函数，只放原始值或单一变量引用
多层阴影必须手动拼成单个字符串
Tailwind 的 theme.extend.boxShadow 只接受对象映射，不接受数组。传 ['0 2px 4px #000', 'inset 0 1px 2px #fff'] 会被忽略或构建失败，不是 bug，是设计如此。
- 正确写法是把多层阴影用英文逗号拼成一个字符串：
'0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.8)' - 空格要转义为下划线，但逗号后的空格可保留（或统一用下划线）
- 配置中不要写
shadow-card这类类名前缀，只写值；key 名决定最终类名，如card→shadow-card - 深色模式适配需额外加
dark:shadow-card-dark，且该 key 必须在配置中单独定义
hover/focus 阴影切换为什么没过渡效果
写了 hover:shadow-lg 却跳变，不是类名问题，而是缺了三样东西：过渡属性、持续时间、容器裁剪控制。
- 必须显式启用
transition-shadow（需在theme.extend.transitionProperty中添加），只写transition不生效 - 搭配
duration-200或duration-300，duration-500在按钮上反馈太慢 - 父容器设了
overflow-hidden？阴影会被直接裁掉——内阴影尤其敏感，检查是否漏掉overflow-visible - 状态类必须与基础阴影共存：
shadow-card-sm hover:shadow-card-lg，两者都得在配置里定义好
内阴影（inset）为什么看不见
shadow-inner 是过时写法，v1.0 就移除了；ring-inset 不是内阴影，是描边伪元素，和 box-shadow 无关。
立即学习“前端免费学习笔记（深入）”；
- 真内阴影必须带
inset关键字：shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] - Safari 旧版本对
inset+ 大圆角组合渲染不稳定，边缘可能断裂 - 父级
overflow-hidden会裁掉 inset 阴影的扩散区域，哪怕它“向内”也受限制 - z-index 层级覆盖：如果子元素相对定位且 z-index 更高，会盖住自身 inset 阴影
shadow-[] 的容忍度远低于 Chrome，而构建时又不报错，只能靠真机测试卡点。 
