Tailwind CSS - 盒阴影颜色

Tailwind CSS - 盒阴影颜色

Tailwind CSS 允许您独立控制盒阴影的颜色，而不受其大小和模糊度的影响。这通过结合 shadow-* 工具类（用于大小）和 shadow-{color} 工具类来实现。

工作原理

应用盒阴影是一个两步过程：

1. 设置阴影属性：使用 shadow-md、shadow-lg 或 shadow-xl 等类来定义偏移、模糊度和扩散范围。
2. 设置阴影颜色：使用 shadow-cyan-500/50 或 shadow-neutral-900 等类来设置颜色。斜杠后面的数字表示不透明度。

默认情况下，如果您未指定颜色，Tailwind 会使用半透明灰色。

盒阴影颜色类

Tailwind 包含了用于阴影颜色的全部默认颜色调色板。类的结构是 shadow-{color}-{shade}。以下是一个小样本：

Class	CSS 属性（简化）
shadow-inherit	--tw-shadow-color: inherit;
shadow-current	--tw-shadow-color: currentColor;
shadow-transparent	--tw-shadow-color: transparent;
shadow-blue-500	--tw-shadow-color: #3b82f6;
shadow-red-700/50	--tw-shadow-color: rgb(185 28 28 / 0.5);
shadow-zinc-900	--tw-shadow-color: #18181b;

您可以使用 Tailwind 丰富的颜色调色板中的任何颜色。请参阅官方文档以获取完整列表。

实际应用示例

示例 1：卡片上的彩色阴影

在这里，我们创建带有柔和彩色阴影的卡片，这些阴影与其品牌颜色相匹配，从而创建更具凝聚力且视觉吸引力的设计。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Box Shadow Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

  <!-- Card 1: Blue Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl shadow-blue-500/20">
    <h3 class="font-bold text-xl text-blue-800">Blue Theme</h3>
    <p class="text-slate-600 mt-2">This card has a large (`shadow-xl`) blue shadow with 20% opacity (`shadow-blue-500/20`).</p>
  </div>

  <!-- Card 2: Green Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl shadow-emerald-500/20">
    <h3 class="font-bold text-xl text-emerald-800">Green Theme</h3>
    <p class="text-slate-600 mt-2">This card uses the same size shadow but with a green hue.</p>
  </div>

  <!-- Card 3: Default Shadow -->
  <div class="bg-white p-6 rounded-lg shadow-xl">
    <h3 class="font-bold text-xl text-slate-800">Default Theme</h3>
    <p class="text-slate-600 mt-2">This card uses the default gray shadow color for comparison.</p>
  </div>

</div>

</body>
</html>

示例 2：按钮上的交互式阴影颜色

我们可以在用户交互（如 hover 或 focus）时改变阴影颜色，以创建引人入胜的 UI 元素。这对于指示按钮状态非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Shadow Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">

  <button class="
    bg-violet-600
    text-white
    font-bold
    py-3 px-8
    rounded-lg
    transition-all
    duration-300
    shadow-lg
    shadow-violet-600/30
    hover:bg-violet-700
    hover:shadow-xl
    hover:shadow-violet-600/50
    focus:outline-none
    focus:ring-4
    focus:ring-violet-300
  ">
    Click Me
  </button>

</body>
</html>

专业提示

• 不透明度是关键：使用不透明度修饰符（例如 /50、/20）来创建更柔和、更细微的阴影。完全不透明的彩色阴影可能会显得刺眼。
• 任意颜色：需要非常具体的颜色吗？使用任意值：shadow-[#123456]/40。
• 自定义：为了项目范围的一致性，请将您的品牌阴影颜色添加到 tailwind.config.js 文件中的 theme.extend.boxShadowColor 下。