English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 阴影与效果：阴影、透明度与混合模式

1. 阴影（shadow-*）

shadow-* 类设置元素的 box-shadow，提供从 shadow-sm 到 shadow-2xl 的多种大小。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阴影演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 阴影大小 -->
    <div class="bg-white rounded-lg p-6">
      <h3 class="font-semibold mb-4">阴影大小</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-sm text-center">
          <div class="text-sm font-medium">shadow-sm</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
          <div class="text-sm font-medium">shadow</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md text-center">
          <div class="text-sm font-medium">shadow-md</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg text-center">
          <div class="text-sm font-medium">shadow-lg</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-xl text-center">
          <div class="text-sm font-medium">shadow-xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-2xl text-center">
          <div class="text-sm font-medium">shadow-2xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-inner text-center">
          <div class="text-sm font-medium">shadow-inner</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-none text-center">
          <div class="text-sm font-medium">shadow-none</div>
        </div>
      </div>
    </div>

    <!-- 阴影颜色 -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">阴影颜色</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-blue-500/50 text-center">
          <div class="text-sm font-medium">blue-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-green-500/50 text-center">
          <div class="text-sm font-medium">green-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-purple-500/50 text-center">
          <div class="text-sm font-medium">purple-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-red-500/50 text-center">
          <div class="text-sm font-medium">red-500/50</div>
        </div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 卡片阴影 -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">卡片阴影</h4>
          <p class="text-gray-600 text-sm">hover 时阴影增大</p>
        </div>
        <!-- 按钮阴影 -->
        <div class="flex items-center justify-center">
          <button class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-700 transition-all">
            按钮阴影
          </button>
        </div>
        <!-- 悬浮效果 -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">悬浮效果</h4>
          <p class="text-gray-600 text-sm">配合 translate 实现</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 77 行（超过 40 行限制，仅展示）

阴影类名对照：

类名 CSS 值 说明
shadow-sm 小阴影 轻微阴影效果
shadow 默认阴影 标准阴影效果
shadow-md 中等阴影 中等大小阴影
shadow-lg 大阴影 较大阴影效果
shadow-xl 超大阴影 大范围阴影
shadow-2xl 超大阴影 超大范围阴影
shadow-inner 内阴影 元素内部阴影
shadow-none 无阴影 移除阴影
shadow-blue-500/50 蓝色阴影 50%透明 自定义阴影颜色

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) 等复杂属性，而 Tailwind 使用 shadow-lg 等类名直接声明。shadow-blue-500/50 支持自定义阴影颜色和透明度。

💡 提示： shadow-inner 创建内阴影效果，适合凹陷按钮或输入框。shadow-none 用于移除默认阴影。

2. 透明度（opacity-*）

opacity-* 类设置元素的整体透明度。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>透明度演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 透明度梯度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">透明度梯度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-500 opacity-100 rounded flex items-center justify-center text-white text-xs">100</div>
        <div class="w-24 h-24 bg-blue-500 opacity-75 rounded flex items-center justify-center text-white text-xs">75</div>
        <div class="w-24 h-24 bg-blue-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-24 h-24 bg-blue-500 opacity-25 rounded flex items-center justify-center text-white text-xs">25</div>
        <div class="w-24 h-24 bg-blue-500 opacity-0 rounded flex items-center justify-center text-white text-xs">0</div>
      </div>
    </div>

    <!-- 更多透明度值 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">更多透明度值</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-20 h-20 bg-green-500 opacity-90 rounded flex items-center justify-center text-white text-xs">90</div>
        <div class="w-20 h-20 bg-green-500 opacity-80 rounded flex items-center justify-center text-white text-xs">80</div>
        <div class="w-20 h-20 bg-green-500 opacity-70 rounded flex items-center justify-center text-white text-xs">70</div>
        <div class="w-20 h-20 bg-green-500 opacity-60 rounded flex items-center justify-center text-white text-xs">60</div>
        <div class="w-20 h-20 bg-green-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-20 h-20 bg-green-500 opacity-40 rounded flex items-center justify-center text-white text-xs">40</div>
        <div class="w-20 h-20 bg-green-500 opacity-30 rounded flex items-center justify-center text-white text-xs">30</div>
        <div class="w-20 h-20 bg-green-500 opacity-20 rounded flex items-center justify-center text-white text-xs">20</div>
        <div class="w-20 h-20 bg-green-500 opacity-10 rounded flex items-center justify-center text-white text-xs">10</div>
        <div class="w-20 h-20 bg-green-500 opacity-5 rounded flex items-center justify-center text-white text-xs">5</div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="space-y-4">
        <!-- 禁用状态 -->
        <div class="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">正常按钮</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">禁用按钮</button>
        </div>
        <!-- 遮罩层 -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
            <span class="text-white text-xl font-semibold">遮罩层效果</span>
          </div>
        </div>
        <!-- 淡入淡出 -->
        <div class="flex gap-4">
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-100 hover:opacity-75 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            hover 我
          </div>
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-75 hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            hover 我
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 61 行（超过 40 行限制，仅展示）

透明度类名对照：

类名 CSS 值 说明
opacity-0 opacity: 0 完全透明
opacity-5 opacity: 0.05 5%透明
opacity-10 opacity: 0.1 10%透明
opacity-20 opacity: 0.2 20%透明
opacity-25 opacity: 0.25 25%透明
opacity-30 opacity: 0.3 30%透明
opacity-40 opacity: 0.4 40%透明
opacity-50 opacity: 0.5 50%透明
opacity-60 opacity: 0.6 60%透明
opacity-70 opacity: 0.7 70%透明
opacity-75 opacity: 0.75 75%透明
opacity-80 opacity: 0.8 80%透明
opacity-90 opacity: 0.9 90%透明
opacity-95 opacity: 0.95 95%透明
opacity-100 opacity: 1 完全不透明

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 opacity 属性并记住具体数值，而 Tailwind 使用 opacity-50 等语义化类名直接声明。透明度值从 0 到 100，步长为 5。

💡 提示： opacity 影响整个元素（包括内容和子元素）。如果只想让背景透明，使用 bg-blue-500/50 语法。

3. 混合模式（mix-blend-*）

mix-blend-* 类设置元素的混合模式，控制元素与下层内容的混合方式。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>混合模式演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础混合模式 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础混合模式</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-normal flex items-center justify-center text-white font-bold">normal</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-multiply flex items-center justify-center text-white font-bold">multiply</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-screen flex items-center justify-center text-white font-bold">screen</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-overlay flex items-center justify-center text-white font-bold">overlay</div>
        </div>
      </div>
    </div>

    <!-- 更多混合模式 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">更多混合模式</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-darken flex items-center justify-center text-white font-bold">darken</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-lighten flex items-center justify-center text-white font-bold">lighten</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-dodge flex items-center justify-center text-white font-bold">color-dodge</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-burn flex items-center justify-center text-white font-bold">color-burn</div>
        </div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="space-y-4">
        <!-- 图片混合 -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
          <div class="relative h-full flex items-center justify-center text-white text-2xl font-bold">
            混合模式效果
          </div>
        </div>
        <!-- 文字混合 -->
        <div class="relative h-24 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg overflow-hidden">
          <div class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-overlay">
            TAILWIND
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 72 行（超过 40 行限制，仅展示）

混合模式类名对照：

类名 CSS 值 说明
mix-blend-normal mix-blend-mode: normal 正常（默认）
mix-blend-multiply mix-blend-mode: multiply 正片叠底
mix-blend-screen mix-blend-mode: screen 滤色
mix-blend-overlay mix-blend-mode: overlay 叠加
mix-blend-darken mix-blend-mode: darken 变暗
mix-blend-lighten mix-blend-mode: lighten 变亮
mix-blend-color-dodge mix-blend-mode: color-dodge 颜色减淡
mix-blend-color-burn mix-blend-mode: color-burn 颜色加深
mix-blend-hard-light mix-blend-mode: hard-light 强光
mix-blend-soft-light mix-blend-mode: soft-light 柔光
mix-blend-difference mix-blend-mode: difference 差值
mix-blend-exclusion mix-blend-mode: exclusion 排除
mix-blend-hue mix-blend-mode: hue 色相
mix-blend-saturation mix-blend-mode: saturation 饱和度
mix-blend-color mix-blend-mode: color 颜色
mix-blend-luminosity mix-blend-mode: luminosity 亮度

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 mix-blend-mode 属性，而 Tailwind 使用 mix-blend-multiply 等类名直接声明。混合模式常用于图片叠加、文字效果等创意设计。

💡 提示： mix-blend-multiply 常用于图片上叠加颜色，创造深色调效果。mix-blend-screen 用于创建明亮效果。

4. 阴影滤镜（drop-shadow-*）

drop-shadow-* 类使用 CSS filter: drop-shadow() 为元素添加阴影，适合不规则形状。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阴影滤镜演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- drop-shadow 大小 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow 大小</h3>
      <div class="flex flex-wrap gap-8 items-center">
        <div class="text-6xl drop-shadow-sm">🎯</div>
        <div class="text-6xl drop-shadow">🎯</div>
        <div class="text-6xl drop-shadow-md">🎯</div>
        <div class="text-6xl drop-shadow-lg">🎯</div>
        <div class="text-6xl drop-shadow-xl">🎯</div>
        <div class="text-6xl drop-shadow-2xl">🎯</div>
        <div class="text-6xl drop-shadow-none">🎯</div>
      </div>
    </div>

    <!-- drop-shadow vs box-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow vs box-shadow</h3>
      <div class="grid grid-cols-2 gap-8">
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">box-shadow（shadow-lg）</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg">阴影</div>
        </div>
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">drop-shadow（drop-shadow-lg）</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg drop-shadow-lg">阴影</div>
        </div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="space-y-4">
        <!-- 图片阴影 -->
        <div class="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="示例" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="示例" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- SVG 阴影 -->
        <div class="flex gap-4 items-center">
          <svg class="w-16 h-16 text-blue-500 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
          <svg class="w-16 h-16 text-green-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
        </div>
        <!-- 文字阴影效果 -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 p-8 rounded-lg">
          <span class="text-4xl font-bold text-white drop-shadow-lg">带阴影的文字</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 58 行（超过 40 行限制，仅展示）

drop-shadow 类名对照：

类名 CSS 值 说明
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) 小阴影
drop-shadow filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) 默认阴影
drop-shadow-md filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) 中等阴影
drop-shadow-lg filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.06)) 大阴影
drop-shadow-xl filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.1)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.06)) 超大阴影
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) 超大阴影
drop-shadow-none filter: drop-shadow(0 0 #0000) 无阴影

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) 等复杂属性，而 Tailwind 使用 drop-shadow-lg 等类名直接声明。

⚠️ 注意： drop-shadow 遵循元素的 alpha 通道，适合不规则形状（如 PNG 图片、SVG）。box-shadow 创建矩形阴影，适合规则形状。

5. 综合示例

结合以上所有知识点，创建一个完整的阴影与效果示例。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阴影与效果综合示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 卡片网格 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- 基础卡片 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 relative">
          <div class="absolute inset-0 bg-black opacity-20"></div>
          <div class="absolute bottom-4 left-4">
            <span class="bg-white/90 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">标签</span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="font-semibold text-lg mb-2">基础卡片</h3>
          <p class="text-gray-600 text-sm">使用 shadow-md 和 hover:shadow-xl 实现悬浮效果</p>
        </div>
      </div>

      <!-- 渐变卡片 -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
        <div class="p-6 text-white">
          <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4 drop-shadow">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="font-semibold text-lg mb-2">渐变卡片</h3>
          <p class="opacity-90 text-sm">使用渐变背景、阴影和悬浮动画</p>
        </div>
      </div>

      <!-- 暗色卡片 -->
      <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
        <div class="p-6 text-white">
          <div class="flex items-center gap-4 mb-4">
            <img src="https://picsum.photos/50/50" alt="头像" class="w-12 h-12 rounded-full ring-2 ring-purple-500">
            <div>
              <div class="font-semibold">用户名</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">暗色主题卡片，使用 ring 实现头像边框效果</p>
        </div>
      </div>
    </div>

    <!-- 混合模式横幅 -->
    <div class="relative h-64 rounded-2xl overflow-hidden">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/300')"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
      <div class="relative h-full flex flex-col items-center justify-center text-white text-center px-4">
        <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">创意混合模式</h2>
        <p class="text-xl opacity-90 drop-shadow">使用 mix-blend-multiply 实现图片叠加效果</p>
      </div>
    </div>

    <!-- 透明度层叠 -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">透明度层叠</h3>
      <div class="relative h-48 bg-gradient-to-r from-gray-100 to-gray-200 rounded-lg overflow-hidden">
        <div class="absolute left-8 top-8 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-100"></div>
        <div class="absolute left-16 top-16 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-75"></div>
        <div class="absolute left-24 top-24 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-50"></div>
        <div class="absolute left-32 top-32 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-25"></div>
      </div>
    </div>

    <!-- 图标阴影 -->
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8">
      <div class="flex justify-center gap-8">
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">🏠</div>
          <div class="text-gray-400 text-sm">首页</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">用户</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">设置</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">数据</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 85 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现卡片阴影、混合模式横幅、透明度层叠等效果，而 Tailwind 使用阴影、透明度、混合模式等工具类直接在 HTML 中完成。

❓ 常见问题

Q box-shadow 和 drop-shadow 有什么区别？
A box-shadow（shadow-）创建矩形阴影，适合规则形状。drop-shadow（drop-shadow-）遵循元素 alpha 通道，适合不规则形状（PNG、SVG）。drop-shadow 性能稍差。
Q 如何实现元素的禁用状态？
A 使用 opacity-50 cursor-not-allowed 组合。opacity-50 让元素变半透明，cursor-not-allowed 显示禁止光标。配合 pointer-events-none 可以禁止交互。
Q mix-blend-mode 会影响子元素吗？
A 会。mix-blend-mode 影响整个元素及其子元素与下层内容的混合方式。如果只想影响背景，需要将背景和内容分离到不同层级。
Q 阴影颜色透明度怎么设置？
A 使用 shadow-blue-500/50 语法。/50 表示 50% 透明度。也可以使用 shadow-blue-500/25（25%透明）等。默认阴影颜色是黑色。

📖 小节

📝 作业

  1. ⭐ 创建一个卡片组件，使用 shadow-md 和 hover:shadow-xl 实现悬浮阴影效果

  2. ⭐⭐ 创建一个图片画廊，使用 drop-shadow-lg 为图片添加阴影，并使用 opacity-* 实现悬停淡入效果

  3. ⭐⭐⭐ 创建一个横幅组件，使用背景图片 + mix-blend-multiply 渐变叠加 + drop-shadow-lg 文字阴影，实现专业的视觉效果

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏