效果与滤镜
Tailwind CSS 提供了许多效果和滤镜类，可以为你的设计添加视觉深度和交互性。这些类包括阴影、模糊、 混合模式等，可以轻松地创建具有专业外观的UI元素。
模糊效果
使用Tailwind的模糊类可以轻松地为元素添加模糊效果，包括背景模糊和内容模糊。这对于创建毛玻璃效果、焦点管理或增强深度感非常有用。
基础模糊级别
blur-none无模糊 (0px)
blur-sm轻微模糊 (4px)
blur默认模糊 (8px)
blur-md中等模糊 (12px)
blur-lg较大模糊 (16px)
blur-xl大模糊 (24px)
blur-2xl超大模糊 (40px)
blur-3xl极大模糊 (64px)
文本模糊效果
清晰文本 (blur-none)
轻微模糊 (blur-sm)
默认模糊 (blur)
中等模糊 (blur-md)
背景模糊效果 (backdrop-blur)
无背景模糊
backdrop-blur-none轻微背景模糊
backdrop-blur-sm中等背景模糊
backdrop-blur-md大背景模糊
backdrop-blur-xl悬停/焦点状态的模糊变化
blur hover:blur-none悬停时清晰
hover:blur悬停时模糊
blur-sm hover:blur-xl悬停时增加模糊
模糊与其他效果组合
blur-sm brightness-110模糊 + 亮度
blur-sm grayscale模糊 + 灰度
blur-sm sepia模糊 + 棕褐色调
实际应用场景
清晰内容
模糊背景上的清晰文本
模糊背景效果
将图像设置为模糊背景，上面覆盖清晰内容
内容正在加载
这是模糊的内容
加载状态模糊
在加载时使用模糊效果表示内容正在加载中
悬停清晰效果
鼠标悬停时图像从模糊变为清晰
模糊滤镜玻璃卡片效果
玻璃卡片效果
使用backdrop-blur-md结合bg-white/10创建现代的毛玻璃效果， 适合在彩色或图片背景上使用。
如何创建玻璃效果
- • 使用backdrop-blur-md或backdrop-blur-lg
- • 设置半透明背景色，如bg-white/10
- • 添加细边框提升质感，如border-white/20
- • 优先在高对比度背景上使用
模糊滤镜使用技巧
- • 对于文本内容，不要使用过高的模糊值，会影响可读性
- • blur作用于元素本身，而backdrop-blur作用于元素背后的内容
- • 模糊效果会降低页面性能，尤其在移动设备上，应谨慎使用大范围的模糊效果
- • 可以使用arbitrary values（如blur-[8px]）创建自定义模糊级别
- • 模糊与透明度(opacity)结合使用效果更佳
- • 为模糊效果添加过渡动画(transition)，提升用户体验
- • 玻璃态UI效果使用backdrop-blur-md与低透明度的背景色组合实现
盒阴影
盒阴影是创建深度感和层次结构的强大工具。Tailwind提供了多种预设阴影类，从细微的阴影到明显的阴影， 还可以自定义颜色和不透明度。
基础阴影效果
轻微阴影效果
shadow-sm默认阴影效果
shadow中等阴影效果
shadow-md大阴影效果
shadow-lg超大阴影效果
shadow-xl特大阴影效果
shadow-2xl内阴影效果
shadow-inner无阴影效果
shadow-none彩色阴影效果
蓝色阴影
shadow-lg shadow-blue-500/50红色阴影
shadow-lg shadow-red-500/50绿色阴影
shadow-lg shadow-green-500/50紫色阴影
shadow-lg shadow-purple-500/50琥珀色阴影
shadow-lg shadow-amber-500/40自定义阴影
shadow-[0_0_15px_5px_rgba(59,130,246,0.3)]实际应用场景
悬停显示阴影
鼠标悬停时增强阴影效果
卡片悬停效果
立体按钮
层叠卡片
阴影使用技巧
- • 阴影通常用于表示元素的高度层级，阴影越大表示离页面越远
- • 避免过多使用大阴影，会让界面看起来很杂乱
- • 与转换效果(transform)结合使用可以制作出很好的悬停效果
- • 使用shadow-inner可以创建凹陷效果，适合表示输入框或按钮的按下状态
- • 彩色阴影应该与品牌色调一致，避免使用高饱和度的阴影
- • 可以使用arbitrary values (如shadow-[0px_5px_15px_rgba(0,0,0,0.35)])创建完全自定义的阴影
透明度 (Opacity)
透明度调整允许元素部分透明，常用于悬停效果、背景层和模态框。 Tailwind 提供了从完全透明到完全不透明的多个级别控制。
基础透明度级别
opacity-0完全透明
opacity-55% 不透明度
opacity-1010% 不透明度
opacity-2020% 不透明度
opacity-2525% 不透明度
opacity-3030% 不透明度
opacity-4040% 不透明度
opacity-5050% 不透明度
opacity-6060% 不透明度
opacity-7070% 不透明度
opacity-7575% 不透明度
opacity-8080% 不透明度
opacity-9090% 不透明度
opacity-9595% 不透明度
opacity-100完全不透明
文本透明度
正常文本 (opacity-100)
75% 不透明度文本
50% 不透明度文本
25% 不透明度文本
正常文本 (opacity-100)
75% 不透明度文本
50% 不透明度文本
25% 不透明度文本
正常文本 (opacity-100)
75% 不透明度文本
50% 不透明度文本
25% 不透明度文本
色彩透明度（使用/修饰符）
背景色透明度
bg-blue-500bg-blue-500/75bg-blue-500/50bg-blue-500/25bg-blue-500/10边框色透明度
border-blue-500border-blue-500/75border-blue-500/50border-blue-500/25border-blue-500/10悬停状态透明度变化
opacity-75 hover:opacity-100hover:opacity-75group-hover:opacity-50/100实际应用场景
禁用状态按钮
使用opacity-50来表示按钮的禁用状态
图像悬停效果
鼠标悬停时图片变暗，同时显示提示文本
卡片标题
卡片描述内容
图层叠加效果
使用半透明渐变覆盖层提高文字可读性
透明度使用技巧
- • 对于背景和边框色，优先使用颜色/透明度语法（如bg-blue-500/50）而非opacity属性
- • opacity属性会影响元素及其所有子元素，而颜色透明度只影响特定属性
- • 使用较低的透明度（opacity-75或更低）可以使界面看起来更柔和
- • 对于禁用状态，通常使用opacity-50是个很好的选择
- • 利用group-hover结合opacity可以创建复杂的悬停效果
- • 避免在重要内容上使用过低的透明度，会影响可读性
- • 可以使用arbitrary values (如opacity-[0.42])创建更精确的透明度