Tailwind CSS 阴影

阴影是创造界面深度感和层次感的关键元素。它能让元素看起来像是浮动在页面之上，从而吸引用户的注意力。Tailwind 提供了一套精心设计的 box-shadow 工具类。

Box Shadow (盒子阴影)

使用 shadow-{size} 工具类来为元素添加盒子阴影。

Tailwind 的阴影比例尺经过精心设计，从小到大，层次分明：

• shadow-sm: 小阴影，非常微妙。
• shadow: 标准阴影，最常用。
• shadow-md: 中等阴影。
• shadow-lg: 大阴影。
• shadow-xl: 超大阴影。
• shadow-2xl: 超超大阴影，用于非常突出的元素。
• shadow-inner: 内阴影，让元素看起来像是凹陷下去的。
• shadow-none: 移除阴影。

<button class="bg-white shadow-md hover:shadow-lg p-4 rounded-lg">
  一个带阴影的按钮
</button>

<div class="bg-gray-100 shadow-inner p-4 rounded-lg">
  一个带内阴影的区域
</div>

通常，阴影效果会与交互状态（如 hover）结合使用，当用户与元素交互时，通过改变阴影大小来提供视觉反馈。

Shadow Color (阴影颜色)

从 Tailwind CSS v3.0 开始，你可以使用 shadow-{color} 工具类来改变阴影的颜色。这极大地增加了设计的灵活性，让你能够创造出彩色的、符合品牌风格的阴影。

<button class="shadow-lg shadow-cyan-500/50 ...">
  一个蓝色的辉光按钮
</button>

在这个例子中：

• shadow-lg: 应用大尺寸的阴影配置。
• shadow-cyan-500/50: 将阴影的颜色设置为 cyan-500，并且不透明度为 50%。使用斜杠语法 (/) 来设置不透明度是非常方便的。

你可以将任何颜色（包括你自己在 tailwind.config.js 中定义的颜色）用作阴影颜色。

Drop Shadow (投影)

除了 box-shadow，Tailwind 还提供了一个 drop-shadow 滤镜工具类。与 box-shadow 不同，drop-shadow 会根据元素内容的实际形状（包括透明部分）来创建阴影，而 box-shadow 则是根据元素的盒子模型来创建阴影。

这在你需要为不规则形状的 PNG 图片或 SVG 图标添加阴影时非常有用。

drop-shadow 的尺寸和 box-shadow 共享相同的比例尺。

• drop-shadow-sm
• drop-shadow-lg
• drop-shadow-2xl

<!-- 这个阴影会紧贴 Logo 的形状 -->
<img src="logo.svg" class="drop-shadow-lg">

<!-- 这个阴影只会是图片的矩形边框 -->
<img src="logo.svg" class="shadow-lg">

通过巧妙地运用这些阴影工具，你可以极大地提升界面的质感和视觉层次。