opacity过渡仅支持整体线性淡入淡出，无法实现分区域透明渐变；真·透明度渐变需用mask或背景渐变叠加，推荐组合bg-gradient-to-r与-webkit-mask/standard mask，并通过transition控制mask-position实现hover动画。
opacity 过渡无法直接实现“渐变”效果
很多人以为给 opacity 加上 transition 就能做出从透明到不透明的“渐变”，其实这只是线性淡入/淡出——它没有空间上的过渡层次，比如左半边透明、右半边不透明这种视觉渐变。真正的透明度“渐变”需要的是蒙版（mask）或背景渐变叠加，opacity 本身作用于整个元素，无法分区域控制。
用 background-image + mask 实现方向性透明渐变
Tailwind 不直接提供透明度渐变工具类，但可以组合 bg-gradient-to-r 和 CSS mask（或 -webkit-mask）达成类似效果。关键点是：用渐变色遮罩内容，让颜色深浅映射为可见度高低。
常见写法示例：
<div class="relative w-64 h-32 bg-blue-500"> <div class="absolute inset-0 bg-black bg-opacity-0 mask mask-gradient mask-right-20" style="-webkit-mask: linear-gradient(to right, transparent 0%, black 100%);"></div> </div>
说明：
立即学习“前端免费学习笔记（深入）”；
-
mask-right-20是自定义类（需在tailwind.config.js中扩展），实际生效的是内联-webkit-mask - 渐变方向必须与 mask 方向一致，
to right对应从左显、向右隐 - 务必加
bg-opacity-0防止遮罩层自身带颜色干扰 - Safari 仍依赖
-webkit-mask，Firefox 支持原生mask，Chrome 112+ 已支持标准语法
hover 触发透明度渐变时的常见失效原因
想让鼠标悬停时出现“从透明到可见”的渐变动画？直接写 hover:opacity-0 hover:opacity-100 transition-opacity 只会闪一下，因为 opacity 切换是瞬时的，且不支持渐变路径。真正可行的方式是：
- 用
transition控制-webkit-mask-position或background-position，配合渐变背景模拟“扫过式”显现 - 避免在父容器上设
opacity，否则子元素继承后 mask 会失效 - 不要对
mask属性本身加transition—— 它不支持平滑过渡，只能过渡其相关属性如mask-position或background-position - 若用伪元素叠加渐变遮罩，确保
z-index和pointer-events: none设置正确，否则会拦截鼠标事件
替代方案：用 backdrop-filter 模拟局部透明渐变
如果目标是让文字/图标在模糊背景上“边缘渐隐”，backdrop-filter + mask 组合更可控。例如顶部导航栏文字随滚动淡出：
.fade-out-top {
-webkit-mask: linear-gradient(to bottom, transparent 0%, black 30%);
mask: linear-gradient(to bottom, transparent 0%, black 30%);
}
注意：
-
backdrop-filter: blur(4px)必须和mask同时存在才体现层次感 - 该方案在 iOS Safari 上需开启
backdrop-filter实验性支持（部分版本默认关闭） - 不要指望
opacity动画能替代 mask 渐变——它们解决的是完全不同的问题域
最易被忽略的一点：mask 渐变的起止位置单位用百分比最安全，用 px 或 rem 在响应式场景下极易错位。
