Tailwind CSS - 盒阴影

现代 Tailwind CSS：使用盒阴影实现深度和立体感

盒阴影（Box Shadow）工具类对于在用户界面中创建深度、层级和视觉分隔至关重要。Tailwind CSS 提供了一套美观且预配置的 shadow-* 工具类，让您能够轻松为元素添加细微或显著的立体感。

盒阴影工具类

Tailwind 的默认阴影调色板旨在协同工作，提供一致的立体感层级。

Class	描述
shadow-sm	非常细微的阴影，适用于小型元素或轻微的抬升效果。
shadow	标准的通用阴影。
shadow-md	中等阴影，用于略微增加强调。
shadow-lg	大型阴影，非常适合卡片或鼠标悬停时的交互元素。
shadow-xl	超大阴影，常用于模态框（modals）、下拉菜单（dropdowns）或弹出框（popovers）。
shadow-2xl	最大阴影，与页面产生最大程度的分离。
shadow-inner	内嵌阴影，适用于按压状态或表单输入框。
shadow-none	移除任何现有的盒阴影。

现代特性：彩色阴影

现代 Tailwind 的一个强大功能是能够轻松地为阴影着色。默认情况下，阴影使用半透明黑色。您可以通过添加主题颜色调色板中的阴影颜色工具类来覆盖此设置。语法为 shadow-{color}-{shade}。

<!-- A standard large shadow -->
<div class="shadow-lg">...</div>

<!-- A large shadow with a blue tint -->
<div class="shadow-lg shadow-blue-500/50">...</div>

<!-- A subtle inner shadow with a red tint for a warning input -->
<input class="shadow-inner shadow-red-500/30" />

实际应用示例

要跟随这些示例，请确保您已设置好一个现代的 Tailwind CSS 项目。

示例 1：带悬停效果的交互式卡片

一个经典的 UI 模式是在鼠标悬停时“抬升”卡片以表明其可交互。我们可以通过在 hover 状态下应用更大的阴影，并添加 transition 使其平滑来实现这一点。

<link href="/dist/output.css" rel="stylesheet">

<body class="bg-slate-100 grid place-items-center h-screen">
  <div
    class="
      bg-white p-6 rounded-xl shadow-md
      hover:shadow-xl hover:-translate-y-1
      transition-all duration-300 cursor-pointer
    ">
    <h3 class="text-xl font-bold text-gray-900">Learn Tailwind CSS</h3>
    <p class="mt-2 text-gray-600">The best way to style modern websites.</p>
  </div>
</body>

示例 2：带彩色阴影的样式按钮

彩色阴影可以创建美丽的“发光”效果，从而强化您的品牌颜色调色板。在这里，我们为主操作按钮添加了一个蓝色阴影。

<link href="/dist/output.css" rel="stylesheet">

<body class="bg-gray-900 grid place-items-center h-screen">
  <button
    class="
      bg-blue-600 text-white font-bold py-3 px-6 rounded-lg
      shadow-lg shadow-blue-600/50
      hover:bg-blue-700
      transition-colors
    ">
    Get Started
  </button>
</body>

最佳实践和性能

层级（Hierarchy）：使用阴影强度来传达重要性。模态框（shadow-xl）应显示在卡片（shadow-lg）之上，卡片又应显示在页面背景之上。
一致性（Consistency）：尽可能坚持预定义的阴影层级，以保持一致的视觉语言。
性能（Performance）：动画盒阴影对浏览器来说可能是计算开销大的。对于悬停效果，如果可能，优先考虑动画 transform 和 opacity。transition-shadow 工具类效果很好，但要避免在复杂页面上同时应用于许多元素。
自定义（Customization）：如果默认阴影不符合您的设计系统，您可以轻松地在 tailwind.config.js 文件中扩展它们。