效果与滤镜

Tailwind CSS 提供了丰富的视觉效果工具类，包括阴影、模糊、滤镜等。这些效果可以让你的界面更加生动和专业。本章将详细介绍如何使用这些工具类。

阴影效果

阴影是创建深度感和层次感的重要工具，可以让元素看起来像是浮在页面上。

基本用法

<div class="shadow-sm bg-white p-6 rounded-lg">小阴影</div>
<div class="shadow bg-white p-6 rounded-lg">默认阴影</div>
<div class="shadow-md bg-white p-6 rounded-lg">中等阴影</div>
<div class="shadow-lg bg-white p-6 rounded-lg">大阴影</div>
<div class="shadow-xl bg-white p-6 rounded-lg">超大阴影</div>
<div class="shadow-2xl bg-white p-6 rounded-lg">最大阴影</div>
<div class="shadow-none bg-white p-6 rounded-lg">无阴影</div>

v4 新增的更小阴影：

<div class="shadow-2xs bg-white p-6 rounded-lg">超小阴影</div>
<div class="shadow-xs bg-white p-6 rounded-lg">极小阴影</div>

阴影大小对照：

类名	效果描述
shadow-2xs	几乎看不见的微弱阴影
shadow-xs	非常小的阴影
shadow-sm	小阴影
shadow	默认阴影
shadow-md	中等阴影
shadow-lg	大阴影
shadow-xl	超大阴影
shadow-2xl	最大阴影
shadow-none	无阴影

阴影颜色

默认阴影是黑色的，但可以指定任意颜色：

<div class="shadow-lg shadow-blue-500/50 bg-blue-500 p-6 rounded-lg text-white">
  蓝色阴影
</div>

<div class="shadow-lg shadow-red-500/50 bg-red-500 p-6 rounded-lg text-white">
  红色阴影
</div>

<div class="shadow-lg shadow-green-500/50 bg-green-500 p-6 rounded-lg text-white">
  绿色阴影
</div>

内阴影

内阴影让元素看起来像是被按压进去的效果：

<div class="inset-shadow-sm bg-gray-100 p-6 rounded-lg">小内阴影</div>
<div class="inset-shadow-xs bg-gray-100 p-6 rounded-lg">极小内阴影</div>
<div class="inset-shadow-2xs bg-gray-100 p-6 rounded-lg">超小内阴影</div>

内阴影常用于创建输入框的焦点效果或按钮的按下效果：

<button class="bg-gray-200 active:inset-shadow-sm px-4 py-2 rounded transition">
  点击查看内阴影效果
</button>

任意阴影值

<div class="shadow-[0_10px_20px_rgba(0,0,0,0.15)] bg-white p-6 rounded-lg">
  自定义阴影
</div>

滤镜效果

Tailwind CSS 提供了完整的 CSS 滤镜支持，可以创建各种视觉效果。

模糊

使用 blur-{size} 添加高斯模糊效果：

<img class="blur-none" src="image.jpg" alt="无模糊">
<img class="blur-sm" src="image.jpg" alt="小模糊">
<img class="blur" src="image.jpg" alt="默认模糊">
<img class="blur-md" src="image.jpg" alt="中等模糊">
<img class="blur-lg" src="image.jpg" alt="大模糊">
<img class="blur-xl" src="image.jpg" alt="超大模糊">

模糊大小对照：

类名	模糊半径
blur-none	0
blur-sm	4px
blur	8px
blur-md	12px
blur-lg	16px
blur-xl	24px
blur-2xl	40px
blur-3xl	64px

亮度

使用 brightness-{value} 调整元素亮度：

<img class="brightness-50" src="image.jpg" alt="50% 亮度">
<img class="brightness-75" src="image.jpg" alt="75% 亮度">
<img class="brightness-100" src="image.jpg" alt="100% 亮度（默认）">
<img class="brightness-125" src="image.jpg" alt="125% 亮度">
<img class="brightness-150" src="image.jpg" alt="150% 亮度">
<img class="brightness-200" src="image.jpg" alt="200% 亮度">

对比度

使用 contrast-{value} 调整元素对比度：

<img class="contrast-50" src="image.jpg" alt="50% 对比度">
<img class="contrast-100" src="image.jpg" alt="100% 对比度（默认）">
<img class="contrast-125" src="image.jpg" alt="125% 对比度">
<img class="contrast-150" src="image.jpg" alt="150% 对比度">

灰度

使用 grayscale 将元素转换为灰度：

<img class="grayscale-0" src="image.jpg" alt="无灰度">
<img class="grayscale" src="image.jpg" alt="完全灰度">
<img class="grayscale-[50%]" src="image.jpg" alt="50% 灰度">

灰度效果常用于悬停交互：

<img class="grayscale hover:grayscale-0 transition duration-300" src="image.jpg" alt="悬停恢复彩色">

色相旋转

使用 hue-rotate-{angle} 旋转元素的色相：

<img class="hue-rotate-0" src="image.jpg" alt="无旋转">
<img class="hue-rotate-15" src="image.jpg" alt="15度旋转">
<img class="hue-rotate-30" src="image.jpg" alt="30度旋转">
<img class="hue-rotate-60" src="image.jpg" alt="60度旋转">
<img class="hue-rotate-90" src="image.jpg" alt="90度旋转">
<img class="hue-rotate-180" src="image.jpg" alt="180度旋转">

反色

使用 invert 反转元素颜色：

<img class="invert-0" src="image.jpg" alt="无反色">
<img class="invert" src="image.jpg" alt="完全反色">
<img class="invert-[50%]" src="image.jpg" alt="50% 反色">

饱和度

使用 saturate-{value} 调整元素饱和度：

<img class="saturate-0" src="image.jpg" alt="无饱和度（灰度）">
<img class="saturate-50" src="image.jpg" alt="50% 饱和度">
<img class="saturate-100" src="image.jpg" alt="100% 饱和度（默认）">
<img class="saturate-150" src="image.jpg" alt="150% 饱和度">
<img class="saturate-200" src="image.jpg" alt="200% 饱和度">

棕褐色

使用 sepia 添加复古效果：

<img class="sepia-0" src="image.jpg" alt="无棕褐色">
<img class="sepia" src="image.jpg" alt="完全棕褐色">
<img class="sepia-[50%]" src="image.jpg" alt="50% 棕褐色">

投影滤镜

使用 drop-shadow 为透明图片添加投影：

<img class="drop-shadow-sm" src="logo.png" alt="小投影">
<img class="drop-shadow" src="logo.png" alt="默认投影">
<img class="drop-shadow-md" src="logo.png" alt="中等投影">
<img class="drop-shadow-lg" src="logo.png" alt="大投影">
<img class="drop-shadow-xl" src="logo.png" alt="超大投影">
<img class="drop-shadow-2xl" src="logo.png" alt="最大投影">

drop-shadow 与 box-shadow 的区别：

• box-shadow 为元素的盒子添加阴影
• drop-shadow 为元素的内容添加阴影，适用于透明图片

组合滤镜

多个滤镜可以组合使用：

<img class="blur-sm grayscale brightness-110" src="image.jpg" alt="组合滤镜">
<img class="contrast-125 saturate-150" src="image.jpg" alt="增强对比和饱和度">

移除滤镜

<div class="blur-md grayscale md:filter-none">
  在 md 断点以上移除所有滤镜
</div>

背景滤镜

背景滤镜用于对元素背后的内容应用效果，常用于毛玻璃效果。

背景模糊

<div class="backdrop-blur-sm bg-white/30 p-6 rounded-lg">
  轻微模糊的毛玻璃效果
</div>

<div class="backdrop-blur bg-white/30 p-6 rounded-lg">
  默认模糊的毛玻璃效果
</div>

<div class="backdrop-blur-md bg-white/30 p-6 rounded-lg">
  中等模糊的毛玻璃效果
</div>

<div class="backdrop-blur-lg bg-white/30 p-6 rounded-lg">
  大模糊的毛玻璃效果
</div>

<div class="backdrop-blur-none bg-white/30 p-6 rounded-lg">
  无模糊
</div>

背景亮度

<div class="backdrop-brightness-50 bg-white/30 p-6 rounded-lg">
  降低背后亮度
</div>

<div class="backdrop-brightness-125 bg-white/30 p-6 rounded-lg">
  提高背后亮度
</div>

背景对比度

<div class="backdrop-contrast-125 bg-white/30 p-6 rounded-lg">
  增强背后对比度
</div>

背景灰度

<div class="backdrop-grayscale bg-white/30 p-6 rounded-lg">
  背后内容变灰度
</div>

背景反色

<div class="backdrop-invert bg-white/30 p-6 rounded-lg">
  背后内容反色
</div>

背景不透明度

<div class="backdrop-opacity-50 backdrop-blur bg-white/30 p-6 rounded-lg">
  50% 背景滤镜不透明度
</div>

背景饱和度

<div class="backdrop-saturate-150 bg-white/30 p-6 rounded-lg">
  增强背后饱和度
</div>

背景棕褐色

<div class="backdrop-sepia bg-white/30 p-6 rounded-lg">
  背后内容复古效果
</div>

混合模式

混合模式控制元素与其背景的混合方式。

背景混合模式

<div class="bg-blend-multiply bg-blue-500 bg-[url('image.jpg')] bg-cover p-6">
  正片叠底
</div>

<div class="bg-blend-screen bg-blue-500 bg-[url('image.jpg')] bg-cover p-6">
  滤色
</div>

<div class="bg-blend-overlay bg-blue-500 bg-[url('image.jpg')] bg-cover p-6">
  叠加
</div>

<div class="bg-blend-darken bg-blue-500 bg-[url('image.jpg')] bg-cover p-6">
  变暗
</div>

<div class="bg-blend-lighten bg-blue-500 bg-[url('image.jpg')] bg-cover p-6">
  变亮
</div>

混合模式

<div class="mix-blend-multiply bg-blue-500 p-6">正片叠底</div>
<div class="mix-blend-screen bg-blue-500 p-6">滤色</div>
<div class="mix-blend-overlay bg-blue-500 p-6">叠加</div>
<div class="mix-blend-darken bg-blue-500 p-6">变暗</div>
<div class="mix-blend-lighten bg-blue-500 p-6">变亮</div>
<div class="mix-blend-difference bg-blue-500 p-6">差值</div>
<div class="mix-blend-exclusion bg-blue-500 p-6">排除</div>
<div class="mix-blend-normal bg-blue-500 p-6">正常（默认）</div>

透明度

控制元素的不透明度：

<div class="opacity-0">完全透明（不可见）</div>
<div class="opacity-25">25% 不透明</div>
<div class="opacity-50">50% 不透明</div>
<div class="opacity-75">75% 不透明</div>
<div class="opacity-100">完全不透明（默认）</div>

配合悬停效果：

<button class="opacity-50 hover:opacity-100 transition-opacity">
  悬停显示
</button>

实战示例

毛玻璃卡片

<div class="relative h-64 bg-[url('background.jpg')] bg-cover rounded-xl overflow-hidden">
  <div class="absolute inset-0 backdrop-blur-md bg-white/20"></div>
  <div class="relative p-6">
    <h3 class="text-xl font-bold text-white">毛玻璃卡片</h3>
    <p class="text-white/80 mt-2">背景内容被模糊处理</p>
  </div>
</div>

悬停效果卡片

<div class="group relative overflow-hidden rounded-xl">
  <img src="image.jpg" alt="" class="transition duration-500 group-hover:scale-110">
  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition duration-300">
    <div class="absolute bottom-0 p-6">
      <h3 class="text-white font-bold text-xl">悬停显示内容</h3>
      <p class="text-white/80 mt-2">悬停时图片放大，遮罩渐显</p>
    </div>
  </div>
</div>

图片滤镜工具栏

<div class="space-y-4">
  <img id="preview" src="image.jpg" class="w-full rounded-lg">
  
  <div class="flex gap-2">
    <button onclick="applyFilter('grayscale')" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">
      灰度
    </button>
    <button onclick="applyFilter('sepia')" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">
      复古
    </button>
    <button onclick="applyFilter('contrast-125')" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">
      高对比
    </button>
    <button onclick="applyFilter('saturate-150')" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">
      鲜艳
    </button>
    <button onclick="applyFilter('')" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300">
      原图
    </button>
  </div>
</div>

模态框背景

<div class="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center">
  <div class="bg-white rounded-xl p-6 shadow-2xl max-w-md">
    <h2 class="text-xl font-bold">模态框</h2>
    <p class="mt-2 text-gray-600">背景被模糊变暗</p>
    <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">
      关闭
    </button>
  </div>
</div>

文字阴影

Tailwind CSS v4.1 新增了文字阴影支持：

<h1 class="text-4xl font-bold text-shadow-lg text-shadow-blue-500/50">
  带阴影的标题
</h1>

<h2 class="text-2xl text-shadow-2xs text-shadow-sky-300 text-sky-950">
  浮雕效果文字
</h2>

加载状态骨架屏

<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

小结

本章介绍了 Tailwind CSS 的效果与滤镜工具类：

• 阴影效果：使用 shadow-{size} 添加外阴影，inset-shadow 添加内阴影
• 模糊滤镜：使用 blur-{size} 添加模糊效果
• 颜色调整：亮度、对比度、饱和度、灰度、反色、棕褐色等
• 投影滤镜：使用 drop-shadow 为透明图片添加投影
• 背景滤镜：使用 backdrop-blur 等创建毛玻璃效果
• 混合模式：控制元素与背景的混合方式
• 透明度：使用 opacity-{value} 控制不透明度

下一章，我们将学习变换与动画的使用方法。