Tailwind CSS 核心语法篇 四：效果

4. 效果 (Effects)

在 Web 设计中，视觉效果对于创建引人注目、富有层次感的用户界面至关重要。Tailwind CSS 提供了丰富的效果相关工具类，使您能够轻松添加阴影、透明度、混合模式等，为简单的元素赋予深度和质感。

4.1 盒阴影 (Box Shadow)

盒阴影是为元素添加深度和层次感最有效的方式。通过模拟光源，阴影可以使元素看起来像是浮动在页面之上，从而在视觉上区分不同的 UI 组件，如卡片、模态框和下拉菜单。

常用类名说明适用场景
shadow-sm小型阴影用于细微的层次感，如活动状态的列表项
shadow默认阴影最通用的阴影，适用于大多数卡片、按钮
shadow-md中型阴影比默认更明显的阴影
shadow-lg大型阴影常用。用于需要突出显示的元素，如悬浮的面板
shadow-xl特大阴影常用。用于模态框、弹出窗口等最高层级的元素
shadow-none移除阴影用于在特定状态（如 hover）下移除阴影

实用技巧：可以通过添加颜色来改变阴影的色调，例如 shadow-lg shadow-cyan-500/50，这可以创建出更符合品牌风格的、更生动的阴影效果。

代码范例：不同层级的盒阴影对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Shadow</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">
      <!-- 适用于标准卡片 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h3 class="font-bold">shadow-md</h3>
        <p>A standard card shadow.</p>
      </div>
      <!-- 适用于需要强调的面板 -->
      <div class="bg-white p-6 rounded-lg shadow-lg">
        <h3 class="font-bold">shadow-lg</h3>
        <p>A more prominent shadow.</p>
      </div>
      <!-- 适用于最高层级的模态框 -->
      <div class="bg-white p-6 rounded-lg shadow-2xl">
        <h3 class="font-bold">shadow-2xl</h3>
        <p>Used for modals and pop-ups.</p>
      </div>
    </div>
  </body>
</html>

4.2 透明度 (Opacity)

透明度 (opacity) 用于控制元素的可见程度。它不仅能创建半透明效果，更重要的是，它常用于交互状态的视觉反馈。

核心应用:

  • 悬停状态: hover:opacity-80 可以在用户鼠标悬停时轻微降低元素透明度，提供清晰的交互反馈。
  • 禁用状态: disabled:opacity-50 可以让禁用的按钮或输入框看起来“褪色”，明确表示其不可用。
常用类名CSS 等效说明
opacity-100opacity: 1;完全不透明 (默认)
opacity-75opacity: 0.75;75% 不透明度
opacity-50opacity: 0.5;50% 不透明度 (常用于禁用状态)
opacity-0opacity: 0;完全透明 (隐藏)

代码范例：按钮的交互透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Opacity States</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 flex items-center space-x-4">
    <!-- 悬停时透明度变为 80% -->
    <button class="px-4 py-2 bg-blue-600 text-white rounded-md transition hover:opacity-80">
      Hover Me
    </button>
    <!-- 禁用时透明度为 50% -->
    <button class="px-4 py-2 bg-blue-600 text-white rounded-md disabled:opacity-50" disabled>
      Disabled
    </button>
  </body>
</html>

4.3 混合模式 (Blend Mode)

混合模式 (mix-blend-mode) 是一种高级的创意工具，它定义了层叠的元素如何相互混合颜色。最常见的应用场景是图像着色，即在一个背景图片上叠加一个彩色层，通过混合模式创造出独特的滤镜效果。

常用类名说明效果描述
mix-blend-multiply正片叠底将上下层颜色相乘，结果总是更暗。非常适合为图片添加深色滤镜。
mix-blend-screen滤色效果与 multiply 相反，结果总是更亮。适合为图片添加浅色或高光效果。
mix-blend-overlay叠加结合了 multiply 和 screen，保留了底层图像的高光和阴影，效果更自然。

代码范例：使用混合模式为图片着色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blend Mode</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-8 bg-slate-100 flex justify-center">
    <!-- 相对定位的容器 -->
    <div class="relative w-96 h-64 rounded-lg overflow-hidden">
      <!-- 底层是图片 -->
      <img src="https://picsum.photos/400/300" alt="City" class="absolute inset-0 w-full h-full object-cover">
      <!-- 
        上层是一个绝对定位的彩色 div。
        mix-blend-multiply 会将这个 div 的蓝色与下方的图片颜色混合。
      -->
      <div class="absolute inset-0 bg-blue-600 mix-blend-multiply"></div>
    </div>
  </body>
</html>