33. 阴影效果

本节目标：掌握 Tailwind 的阴影系统，能根据场景选择合适的阴影大小，学会用阴影表达元素的「高度」和层次感。

扁平的界面加一点阴影，元素就从背景中「浮」起来了。阴影用得好，页面的层次感立马出来；用得太满，又会显得脏。

盒阴影：shadow

Tailwind 提供 7 个预设阴影级别：

类名	效果
`shadow-sm`	微阴影（1px 模糊）
`shadow`	默认阴影（小卡片）
`shadow-md`	中等阴影（弹出层）
`shadow-lg`	大阴影（模态框）
`shadow-xl`	超大阴影（悬浮面板）
`shadow-2xl`	特大阴影（强调元素）
`shadow-inner`	内阴影（凹陷效果）
`shadow-none`	无阴影

<!-- 小卡片 -->
<div class="shadow p-4 bg-white rounded-lg">
  轻微浮起的卡片
</div>

<!-- 模态框 -->
<div class="shadow-xl p-6 bg-white rounded-xl">
  浮在页面上方的模态框
</div>

<!-- 凹陷效果 -->
<div class="shadow-inner p-4 bg-gray-100 rounded">
  看起来凹进去的输入区域
</div>

阴影大小的选择原则

阴影越大，元素看起来「离页面越远」：

shadow-sm → 微妙的边界感，适合表格行、分隔区域
shadow → 标准卡片，最常见的选择
shadow-md → 下拉菜单、弹出层
shadow-lg → 模态框、通知
shadow-xl / shadow-2xl → 强调元素、英雄卡片

Tip

不要滥用大阴影。一个页面上全是 shadow-2xl 会显得很脏。大多数元素用 shadow 或 shadow-sm 就够了。

内阴影：shadow-inner

shadow-inner 创建内阴影，让元素看起来「凹进去」：

<div class="shadow-inner p-6 bg-gray-50 rounded-lg">
  凹陷的面板
</div>

常用于：

输入框（看起来可以输入）
按下状态的按钮
凹陷的容器

阴影颜色

v4 支持彩色阴影：

<!-- 蓝色阴影 -->
<div class="shadow-lg shadow-blue-500/50 p-4 bg-white rounded-lg">
  蓝色阴影的卡片
</div>

<!-- 红色阴影 -->
<div class="shadow-lg shadow-red-500/40 p-4 bg-white rounded-lg">
  红色阴影
</div>

语法是 shadow-{size} shadow-{color}/{opacity}。

Note

彩色阴影用 / 控制透明度很重要。完全不透明的彩色阴影会很假，一般用 /30 到 /50 的透明度。

自定义阴影

v4 中通过 @theme 定义自定义阴影：

@theme {
  --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.08), 
                0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
}

然后用 shadow-soft、shadow-glow。

也可以用方括号语法直接用任意值：

<div class="shadow-[0_0_15px_5px_rgba(59,130,246,0.3)]">
  自定义发光阴影
</div>

阴影与悬停效果

阴影最常见的交互效果是悬停时加深：

<div class="shadow hover:shadow-lg transition-shadow duration-200 
            p-4 bg-white rounded-lg cursor-pointer">
  悬停时浮起来
</div>

shadow → 默认状态
hover:shadow-lg → 悬停时变大
transition-shadow duration-200 → 平滑过渡

Tip

悬停阴影变化是最简单也最提升质感的交互。几乎所有可点击的卡片都应该有这个效果。

实际应用：卡片组件

<div class="bg-white rounded-xl shadow hover:shadow-lg transition-shadow duration-200">
  <img src="cover.jpg" class="w-full aspect-video object-cover rounded-t-xl">
  <div class="p-5">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600 text-sm">卡片描述文字...</p>
    <div class="mt-4 flex justify-between items-center">
      <span class="text-sm text-gray-500">2026-07-29</span>
      <button class="text-blue-500 hover:text-blue-600 text-sm font-medium">
        阅读更多
      </button>
    </div>
  </div>
</div>

实际应用：下拉菜单

<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg ring-1 ring-black/5">
  <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">选项一</a>
  <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">选项二</a>
  <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">选项三</a>
</div>

shadow-lg + ring-1 ring-black/5 是下拉菜单的标准组合——既有阴影深度，又有微妙的边框。

实际应用：按钮按下效果

<button class="bg-blue-500 text-white px-6 py-2 rounded-lg
               shadow-md hover:shadow-lg active:shadow-inner
               transition-shadow">
  按下我
</button>

默认：shadow-md
悬停：shadow-lg（浮起）
按下：shadow-inner（凹陷）

阴影性能

阴影是有一定性能开销的属性，尤其是大面积阴影和动态阴影。几个注意点：

避免在大量元素上使用大阴影。列表有 100 项，每项都 shadow-lg，滚动可能卡顿。
动画阴影用 transition-shadow。不要用 transition-all，会过渡所有属性。
移动端谨慎使用。低端移动设备上大面积阴影可能导致渲染问题。

本节小结

shadow-sm 到 shadow-2xl → 预设阴影级别
shadow-inner → 内阴影（凹陷）
shadow-{color}/{opacity} → 彩色阴影
hover:shadow-lg → 悬停浮起效果
transition-shadow → 阴影过渡动画
阴影越大 = 元素越高
大面积阴影注意性能