shadow-md 对应 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)，视觉上呈现中等浮起效果，比 shadow-sm 更明显、比 shadow-lg 更轻盈。
shadow-md / shadow-lg 这些类名到底对应什么CSS值
Tailwind 的 shadow- 工具类不是随意命名的，每个都映射到预设的 box-shadow 值。比如 shadow-md 编译后是 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)，而 shadow-lg 更重，y 偏移更大、模糊半径更高、透明度略高。
实际使用时别死记数值，但得知道：数值越“大”，视觉上卡片越“浮起”，也越容易在浅色背景上显得突兀。
-
shadow-sm适合表单输入框或微弱分层，几乎不压暗背景 -
shadow（无后缀）是默认中性阴影，兼容性最稳 -
shadow-xl在深色模式下可能过重，建议搭配dark:shadow-lg调整 - 自定义阴影必须改
theme.boxShadow配置，直接写shadow-[0_8px_20px_rgba(0,0,0,0.15)]也能用，但会增大构建体积
卡片阴影在深色模式下发灰或看不见怎么办
默认阴影用的是 rgba(0,0,0,0.x)，在深色背景上对比度崩塌，看起来像脏污或干脆隐形。这不是 Tailwind 的 bug，而是 CSS 本身限制——阴影颜色没自动适配背景。
解决方式不是换颜色，而是调整透明度和偏移组合：
- 优先用
dark:shadow-md+shadow-sm组合，避免深色下过度压暗 - 禁用默认黑色，改用带色相的阴影：如
shadow-[0_4px_6px_rgba(56,189,248,0.15)]（青蓝色调），比纯黑更通透 - 深色模式下慎用
shadow-2xl，它在#1e293b背景上基本不可见 - 如果用
@layer base全局重置* { box-shadow-color: transparent; }，会导致所有阴影失效，别这么干
为什么给卡片加 shadow 后边缘出现白边或锯齿
这是 box-shadow 渲染机制导致的常见假象：阴影和卡片内容之间没有像素对齐，尤其在缩放、transform 或 subpixel 渲染场景下更明显。
- 检查是否同时用了
rounded-lg和shadow-lg—— 圆角半径和阴影模糊半径冲突时易出毛边，可尝试rounded-md shadow-md匹配 - 避免在卡片上叠加
backdrop-blur，两者混合渲染会放大边缘噪点 - Chrome 115+ 对
shadow的亚像素处理有变化，若只在 Chrome 出问题，加will-change: transform可缓解 - 绝对定位卡片记得加
translate-z(0)强制 GPU 加速，否则阴影可能被裁剪
需要动态控制阴影强度时，用 class 切换还是内联 style
运行时根据状态（如 hover / focus / disabled）切换阴影，应该用 class，而不是拼接字符串写 style="box-shadow: ..."。
- 用
hover:shadow-lg focus:shadow-xl disabled:shadow-none最简洁，且支持 JIT 编译按需生成 - 若阴影逻辑复杂（比如根据数据值线性插值），写一个
shadow-${level}动态 class，再在tailwind.config.js的theme.extend.boxShadow里定义sm: '...'、md: '...'、lg: '...' - 千万别用
className={`shadow-${isHovered ? 'lg' : 'sm'}`}这种写法——JIT 模式下未声明的shadow-lg不会被包含进最终 CSS - 服务端渲染（SSR）项目要注意：首次加载时 JS 未执行，动态 class 可能导致 FOUC，此时应默认用静态 class，JS 控制仅作增强
阴影不是装饰开关，它是视觉层级的语言。选错一个 shadow 类，可能让卡片从“轻盈悬浮”变成“沉底积灰”，而这种差异往往在设计稿里看不出来，只在真实设备上才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
