Tailwind CSS V4 特效完全指南（阴影、发光、蒙版、渐变、3D变换、入场动画）

Effects（视觉特效）是 Tailwind CSS V4 升级幅度最大的模块之一。V3 仅有基础外阴影、简单发光，而 V4 补齐了专业 UI 所需的全套特效能力：新增内阴影、内发光、彩色投影、元素遮罩、高级渐变、原生3D变换、入场动画，支持多层特效叠加，彻底告别自定义 CSS 写特效。

本文系统梳理 V4 所有 Effects 工具、新旧差异、业务场景、叠加技巧、避坑要点，搭配企业级模板与完整可运行 Demo，一篇吃透 V4 现代视觉特效体系。

一、V4 特效核心重磅升级（对比 V3）

• 全新内阴影体系：新增 inset-shadow-*，轻松实现凹陷、按压质感
• 全新内发光体系：新增 inset-ring-*，原生内描边发光，替代传统 border
• 彩色投影阴影：drop-shadow-颜色/透明度，支持任意色彩投影，适配品牌视觉
• 原生蒙版遮罩：mask-*渐变遮罩、图片遮罩，实现渐隐裁切效果
• 渐变全面增强：支持角度、色标、插值模式、径向/圆锥渐变
• 原生3D变换：无需自定义 CSS，直接实现旋转、透视、立体效果
• 零 JS 入场动画：@starting-style 首次入场过渡动画
• 四层特效叠加：外阴影 + 内阴影 + 外发光 + 内发光，自由组合高级质感

二、双层阴影系统（外阴影 + 内阴影 V4）

1. 传统外阴影 shadow-*（凸起质感）

用于卡片、悬浮、凸起层级，V4 阴影过渡更柔和均匀，基于 OKLCH 色域适配。

shadow-none    /* 清除阴影 */
shadow-sm      /* 轻微阴影 */
shadow         /* 默认标准阴影 */
shadow-md      /* 中等阴影（卡片首选） */
shadow-lg      /* 大阴影 */
shadow-xl      /* 超大阴影 */
shadow-2xl     /* 极致厚重阴影 */

2. V4 新增内阴影 inset-shadow（凹陷/按压质感）

V4 独家特性，用于按压按钮、输入框聚焦、凹陷卡片、磨砂内嵌效果，是现代高级 UI 核心特效。

inset-shadow-sm
inset-shadow
inset-shadow-md
inset-shadow-lg
inset-shadow-xl

业务场景：按钮 active 按压态、开关选中、输入框聚焦、凹陷面板。

三、双层发光系统（外发光 + 内发光 V4）

1. 外发光 ring-*（V4 语法变更）

V4 重构 ring 规则：默认 1px、继承文字色，彻底告别 V3 默认 3px 蓝色硬编码，更灵活可控。

ring-0     /* 清除发光 */
ring       /* 1px 默认发光 */
ring-2 ring-4 ring-8/* 彩色发光 + 透明度（V4标准） */
ring-blue-500/50
ring-green-400/60

2. V4 新增内发光 inset-ring（内层描边）

内发光不挤占布局、不遮挡外阴影，完美替代 border 做选中态、聚焦态，无布局抖动。

inset-ring-1 inset-ring-2
inset-ring-blue-500
inset-ring-white/40

四、彩色投影 drop-shadow（V4 增强）

V4.1+ 全新支持彩色投影+透明度，专门用于图片、图标、文字透明元素投影，比 box-shadow 更贴合不规则图形。

/* 基础强度 */
drop-shadow-sm drop-shadow drop-shadow-lg/* V4 彩色投影（核心新特性） */
drop-shadow-blue-500/40
drop-shadow-purple-400/50
drop-shadow-white/30

场景：Logo 悬浮、图标立体、透明弹窗、海报文字描边投影。

五、蒙版遮罩 mask-*（V4 全新）

原生支持 CSS mask，实现文字/图片上下渐隐、左右裁切、圆形遮罩，无需任何自定义 CSS。

/* 上下渐变淡出 */
mask-linear-b-t
mask-linear-t-b/* 圆形遮罩 */
mask-radial
/* 自定义渐变遮罩 */
mask-[linear-gradient(#000_80%,transparent)]

高频场景：长列表底部渐隐、卡片文字截断淡出、图片圆角裁切、渐变过渡遮罩。

六、高级渐变系统（V4 全面升级）

V4 渐变支持精细角度、多色标、径向/圆锥渐变、OKLCH 广色域过渡，彻底解决 V3 渐变生硬问题。

/* 线性渐变 */
bg-gradient-to-r
bg-gradient-to-b/* V4 精准角度 */
bg-gradient-[135deg]
/* 径向 / 圆锥渐变 */
bg-radial-gradient
bg-conic-gradient
/* 多色标透明渐变 */
from-blue-500 via-purple-500/80 to-pink-400/20

七、模糊与毛玻璃（V4 兼容优化）

1. 元素模糊 blur

blur-sm blur blur-md blur-lg blur-xl

2. 背景毛玻璃 backdrop-blur

V4 适配所有移动端，弹窗、导航栏磨砂质感首选。

backdrop-blur-sm backdrop-blur-md backdrop-blur-lg
bg-white/80 dark:bg-slate-900/80

八、原生 3D 变换（V4 新增）

无需 transform 自定义，直接使用工具类实现透视、立体、旋转 3D 效果。

perspective-1000      /* 透视距离 */
preserve-3d           /* 保留3D空间 */
rotate-y-12 rotate-x-6 /* 轴向3D旋转 */

适合官网首页、卡片悬浮、3D 展示模块。

九、零 JS 入场动画 @starting-style（V4 黑科技）

原生 CSS 实现首次入场过渡，弹窗、下拉、Toast 弹出动画，无需 JS 控制状态。

transition-all duration-300
@starting-style:opacity-0 @starting-style:scale-95

十、V4 多层特效叠加公式（高级质感核心）

V4 支持四层特效自由叠加，是 V3 完全不具备的能力：

1. 外阴影 shadow：拉开层级、悬浮凸起
2. 内阴影 inset-shadow：增加肌理、按压凹陷
3. 外发光 ring：聚焦高亮、状态提示
4. 内发光 inset-ring：精细描边、选中状态

组合示例：shadow-md inset-shadow-sm ring-blue-500/30 inset-ring-slate-200

十一、企业级实战模板（直接复用）

1. 高级悬浮卡片（外阴影+内阴影叠加）

<div class="bg-white rounded-xl shadow-md hover:shadow-xl inset-shadow-sm transition duration-300">
  双层阴影高级质感卡片
</div>

2. 按压按钮凹陷效果

<button class="bg-slate-100 rounded-lg active:inset-shadow-md transition">
  按压凹陷按钮
</button>

3. 聚焦输入框（内发光无抖动）

<input class="rounded-lg bg-slate-50 focus:inset-ring-2 focus:inset-ring-blue-500/50 outline-none transition">

4. 彩色图标投影

<div class="drop-shadow-blue-500/60">彩色投影图标/Logo</div>

5. 底部渐隐文字列表

<div class="mask-linear-b-t mask-fade-out-20">长文本底部渐隐</div>

6. 毛玻璃导航栏

<header class="fixed top-0 w-full bg-white/70 backdrop-blur-md">磨砂导航栏</header>

十二、V4 特效避坑清单

• ❌ V3 旧 ring 习惯作废：V4 ring 默认 1px、继承色，不再是固定蓝色
• ❌ 边框状态优先用 inset-ring，不要用 border，避免布局抖动
• ❌ 普通卡片不要叠加过多特效，避免页面杂乱廉价
• ✅ 按压效果、凹陷肌理必须用 inset-shadow，V3 无法实现
• ✅ 透明图形、图标阴影用 drop-shadow，贴合不规则轮廓
• ✅ 渐隐截断统一用 mask，替代传统伪元素方案
• ✅ 入场动画优先 @starting-style，零 JS 更轻量化

十三、完整可运行 V4 特效 Demo

包含内阴影、内发光、彩色投影、蒙版渐隐、毛玻璃、入场动画、多层特效叠加。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 Effects 特效 Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .mask-fade-out-20 {
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
      }
    }
  </style>
</head>
<body class="p-6 bg-slate-100 space-y-8">
  <h1 class="text-3xl font-bold text-center">Tailwind CSS V4 全套特效演示</h1>

  <!-- 1. 双层阴影叠加（凸起+肌理） -->
  <div class="p-6 bg-white rounded-xl shadow-md hover:shadow-lg inset-shadow-sm transition">
    外阴影 + 内阴影 双层质感卡片
  </div>

  <!-- 2. 按压凹陷效果 -->
  <button class="px-6 py-3 bg-slate-200 rounded-lg active:inset-shadow-md transition-all w-full">
    点击查看按压凹陷特效
  </button>

  <!-- 3. 内发光聚焦输入框 -->
  <input placeholder="聚焦查看内发光效果" class="w-full p-3 rounded-lg bg-white outline-none focus:inset-ring-2 focus:inset-ring-blue-500/50 transition">

  <!-- 4. 彩色投影 -->
  <div class="text-center text-2xl font-bold text-blue-500 drop-shadow-blue-500/60">
    V4 彩色文字投影特效
  </div>

  <!-- 5. 蒙版底部渐隐 -->
  <div class="h-20 overflow-hidden mask-fade-out-20 bg-white p-4 rounded-lg">
    这是超长文本内容，用于演示 V4 蒙版渐隐效果，底部内容会自然淡出，不需要额外伪元素，原生工具类即可实现优雅的文字截断过渡效果。
  </div>

  <!-- 6. 毛玻璃特效 -->
  <div class="bg-white/60 backdrop-blur-md p-6 rounded-xl shadow-sm border border-white/40">
    毛玻璃磨砂质感（backdrop-blur）
  </div>

  <!-- 7. 零JS入场动画 -->
  <div class="p-4 bg-emerald-500 text-white rounded-lg transition-all duration-500 @starting-style:opacity-0 @starting-style:scale-95">
    刷新页面查看首次入场动画
  </div>

</body>
</html>

总结

Tailwind CSS V4 彻底补齐了视觉特效短板，从 V3 单一阴影升级为双层阴影、双层发光、彩色投影、蒙版遮罩、3D变换、原生入场动画的专业特效体系。

核心开发口诀：凸起用shadow、凹陷用inset-shadow、聚焦用ring、精细描边用inset-ring、透明元素用drop-shadow、渐隐裁切用mask、弹窗磨砂用backdrop-blur、入场动画用starting-style。

Tailwind CSS V4 Effects 特效速查表

配套上一篇Effects教程，V4新增大量特效工具类，支持多层叠加；半透明统一使用 /百分比 语法，变体从左向右生效

一、外阴影 shadow（凸起卡片、悬浮层级）

二、V4新增 内阴影 inset-shadow（凹陷、按压质感）

三、外发光 ring（聚焦高亮、状态提示）

V4改动：默认1px，继承文字颜色，不再是V3固定蓝色

工具类	说明
ring-0	清除ring发光
ring	1px基础发光
ring-2	2px
ring-4	4px
ring-8	8px
ring-blue-500/50	彩色半透明发光

四、V4新增 内发光 inset-ring（精细内层描边，无布局抖动）

五、彩色投影 drop-shadow（图标/文字/不规则图形投影）

和box-shadow区别：贴合元素轮廓，适合透明图片、SVG、文字

工具类	说明
drop-shadow-sm	轻微投影
drop-shadow	默认投影
drop-shadow-lg	大投影
drop-shadow-blue-500/40	V4新增：彩色半透明投影

六、模糊 & 毛玻璃

七、蒙版 mask（渐隐裁切效果）

mask-linear-b-t        /* 从上到下，底部淡出 */
mask-linear-t-b        /* 从下到上，顶部淡出 */
mask-radial            /* 径向圆形遮罩 */
mask-[linear-gradient(#000_80%,transparent)]  /* 自定义渐变遮罩 */

八、渐变相关

bg-gradient-to-r        /* 水平线性渐变 */
bg-gradient-to-b        /* 垂直线性渐变 */
bg-gradient-[135deg]    /* 自定义角度渐变 */
bg-radial-gradient      /* 径向渐变 */
bg-conic-gradient       /* 圆锥渐变 */
from-blue-500 via-purple-500/80 to-pink-400/20

九、3D变换（V4新增）

perspective-1000        /* 设置透视距离 */
preserve-3d             /* 保留3D空间 */
rotate-x-6              /* X轴旋转6度 */
rotate-y-12             /* Y轴旋转12度 */

十、入场动画 @starting-style（零JS弹出动画）

transition-all duration-300
@starting-style:opacity-0 @starting-style:scale-95

十一、业务常用模板

<!-- 高级悬浮卡片：外阴影+内阴影叠加 -->
<div class="bg-white rounded-xl shadow-md hover:shadow-xl inset-shadow-sm transition duration-300"></div><!-- 按压凹陷按钮 -->
<button class="bg-slate-100 rounded-lg active:inset-shadow-md transition"></button>
<!-- 输入框聚焦内发光（无布局跳动） -->
<input class="rounded-lg bg-slate-50 outline-none focus:inset-ring-2 focus:inset-ring-blue-500/50 transition">
<!-- 彩色文字投影 -->
<div class="text-blue-500 drop-shadow-blue-500/60">文字投影</div>
<!-- 毛玻璃导航栏 -->
<header class="fixed top-0 w-full bg-white/70 backdrop-blur-md"></header>
<!-- 底部渐隐长文本 -->
<div class="overflow-hidden mask-[linear-gradient(#000_80%,transparent)]"></div>
<!-- 弹窗入场动画 -->
<div class="transition-all duration-500 @starting-style:opacity-0 @starting-style:scale-95"></div>

十二、速记要点

1. 凸起层级：shadow；凹陷按压效果：inset-shadow
2. 输入框聚焦优先用 inset-ring，相比border不会挤压布局
3. 图片、SVG图标阴影，使用 drop-shadow，不要用shadow
4. 毛玻璃必须搭配半透明底色 bg-white/70 + backdrop-blur
5. 特效不要多层无限制叠加，容易视觉杂乱
6. 入场动画用 @starting-style，不需要JS控制动画初始状态