tailwind 的 shadow- 类是封装的 box-shadow 值，非简单“一键立体”；档位差异体现设计意图：shadow-sm 轻抬升、shadow-md 贴边凸出、shadow-lg 双层压低、shadow-2xl 大模糊撑开但易卡顿；hover 需配 transition-shadow 且防 overflow-hidden 裁剪；深色背景应改阴影色；自定义 shadow-[] 在 safari/android webview 中兼容性差；shadow-inner 是内阴影，非边框替代，需配合适当背景与圆角；核心在于明确阴影的视觉目标而非参数堆砌。
Tailwind 的 shadow- 预设类不是“一键立体”，而是封装好的 box-shadow 值；用错档位或忽略背景/圆角配合，反而让元素显得脏、浮、不稳。
shadow-sm 到 shadow-2xl 的真实差异在哪
它们不是线性变大，而是参数组合有明显设计意图：
-
shadow-sm对应0 1px 2px 0 rgb(0 0 0 / 0.05)：偏移小、无负扩散，适合按钮悬停时轻微“抬升” -
shadow-md是0 4px 6px -1px rgb(0 0 0 / 0.1)：带 -1px 扩散，阴影更“贴边”，视觉上主体更凸出 -
shadow-lg实为双层阴影：0 10px 15px -3px+0 4px 6px -2px，模糊强、压得低，专为卡片/模态框设计 -
shadow-2xl默认是0 24px 64px -16px rgb(0 0 0 / 0.24)：大模糊+深负偏移，营造“撑开”错觉，但移动端易卡顿
别在小按钮上硬套 shadow-lg——它本就不是为那种尺寸设计的。
hover:shadow-xl 为什么常失效或跳变
常见问题不是类名写错，而是缺少关键配套：
- 必须加
transition-shadow，只写transition不生效 - 推荐搭配
duration-300或duration-200，过长（如duration-500）会让悬停反馈迟钝 - 如果父容器设了
overflow-hidden，阴影会被直接裁掉，看不见 - 深色背景上用默认黑灰阴影（
rgb(0 0 0 / 0.2)）会糊成一片，优先改颜色：hover:shadow-[0_8px_16px_rgba(255,255,255,0.15)]
自定义 shadow-[] 时 Safari 和 Android WebView 容易崩
任意值语法 shadow-[...] 在老环境里很脆：
- Safari 15.4 以下不支持含多个
rgba()或复杂inset的值，比如shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.08)]会直接丢弃整条声明 - Android WebView（尤其旧版 Chrome 内核）对 >40px 模糊半径渲染极慢，
shadow-[0_32px_96px_-24px_rgb(0_0_0_/_0.32)]可能导致滚动掉帧 - 变量引用要谨慎：
var(--primary-500)在shadow-[]中可用，但hsl(var(--primary), 0.3)这类计算会解析失败 - 逗号后必须接空格或下划线，
shadow-[0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.8)]少了下划线会断句错误
shadow-inner 不是“内边框”，别和 border 混用
shadow-inner 渲染的是 inset 阴影，和 border 完全无关：
- 它不会加粗、变色或改变 border 样式，加了
border又加shadow-inner，阴影会压在内容上，反而削弱边框清晰度 - 想模拟“发光边框”，用
ring类：focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 - 需要凹陷感（如输入框聚焦），
shadow-inner要配非白背景：bg-gray-50+shadow-inner才看得清层次 - 圆角大的元素（
rounded-2xl）慎用shadow-inner，Safari 渲染内阴影在弧形边缘容易断裂或发虚
真正难的不是选哪个类，而是判断这个阴影到底服务于什么视觉目标：是暗示可点击？强调层级？还是模拟光照方向？参数可以调，意图错了，再细的值也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
