必须配合 transition 和 hover 才能实现“提升感”，因为 shadow-xl 仅定义静态阴影，无过渡动画；正确写法为 shadow-md transition-shadow duration-300 hover:shadow-xl。
直接用 shadow-xl 不够，必须配合 transition 和悬停状态才能看出“提升感”——否则只是静态阴影，没有视觉动效。
为什么 shadow-xl 单独写没反应？
因为 Tailwind 的阴影工具类本身不带过渡行为，它只定义阴影的大小和模糊度（shadow-xl 对应的是 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)），但浏览器默认不会对 box-shadow 做动画。没有 transition，悬停时阴影就是突变，人眼感知不到“浮起”。
- 必须显式加
transition，推荐transition-shadow（Tailwind v3.2+）或transition（兼容旧版） - 阴影值变化要足够明显：从
shadow-md切到shadow-xl比从shadow-sm切过去更易察觉 - 别忘了加
hover:前缀，否则样式永远不会触发
正确写法：基础卡片悬停提升示例
下面是最小可用组合，复制即用：
<div class="w-64 h-48 bg-white rounded-xl shadow-md transition-shadow duration-300 hover:shadow-xl"> <div class="p-4">卡片内容</div> </div>
-
shadow-md是默认阴影（轻量级，适合静止态） -
transition-shadow只过渡box-shadow属性，比transition更精准、性能更好 -
duration-300是合理起点：太短（duration-75）像闪，太长（duration-500）拖沓 - 如果项目用的是 Tailwind v3.1 或更早，需改用
transition+duration-300，否则无效
移动端和深色模式下容易忽略的问题
阴影在深色背景上可能被吃掉，或者在 iOS Safari 上出现渲染异常：
- 深色模式下，
shadow-xl的默认 rgba 值（rgba(0,0,0,0.25)）在黑色背景上几乎不可见 → 建议搭配dark:shadow-lg或自定义深色阴影（如dark:shadow-[0_10px_25px_-5px_rgba(0,0,0,0.3)]） - iOS Safari 对
box-shadow的硬件加速支持不稳定，快速悬停可能卡顿 → 避免同时过渡transform: translateY(-2px)和shadow，二者叠加易触发重绘瓶颈 - 真机测试时记得关掉「减少动画」系统设置，否则
transition会被强制禁用
真正让卡片“浮起来”的不是阴影多大，而是变化是否平滑、是否符合用户预期。哪怕只加 transition-shadow 这一行，效果就完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
