opacity过渡仅支持整体线性淡入淡出，无法实现分区域透明渐变；真·透明度渐变需用mask或背景渐变叠加，推荐组合bg-gradient-to-r与-webkit-mask/standard mask，并通过transition控制mask-position实现hover动画。
opacity 过渡无法直接实现“渐变”效果
很多人以为给
加上
就能做出从透明到不透明的“渐变”，其实这只是线性淡入/淡出——它没有空间上的过渡层次，比如左半边透明、右半边不透明这种视觉渐变。真正的透明度“渐变”需要的是蒙版（mask）或背景渐变叠加，
本身作用于整个元素，无法分区域控制。
用 background-image + mask 实现方向性透明渐变
Tail
win
d 不直接提供透明度渐变工具类，但可以组合
和 CSS
（或
）达成类似效果。关键点是：用渐变色遮罩内容，让颜色深浅映射为可见度高低。
常见写法示例：
说明：
立即学习
“
前端免费学习笔记（深入）
”；
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
是自定义类（需在
中扩展），实际生效的是内联
渐变方向必须与 mask 方向一致，
对应从左显、向右隐
务必加
防止遮罩层自身带颜色干扰
Safari 仍依赖
，Firefox 支持原生
，Chrome 112+ 已支持标准语法
hover 触发透明度渐变时的常见失效原因
想让鼠标悬停时出现“从透明到可见”的渐变动画？直接写
只会闪一下，因为 opacity 切换是瞬时的，且不支持渐变路径。真正可行的方式是：
用
控制
或
，配合渐变背景模拟“扫过式”显现
避免在父容器上设
，否则子元素继承后 mask 会失效
不要对
属性本身加
—— 它不支持平滑过渡，只能过渡其相关属性如
或
若用伪元素叠加渐变遮罩，确保
和
设置正确，否则会拦截鼠标事件
替代方案：用 backdrop-filter 模拟局部透明渐变
如果目标是让文字/图标在模糊背景上“边缘渐隐”，
+
组合更可控。例如顶部导航栏文字随滚动淡出：
注意：
必须和
同时存在才体现层次感
该方案在 iOS Safari 上需开启
实验性支持（部分版本默认关闭）
不要指望
动画能替代 mask 渐变——它们解决的是完全不同的问题域
最易被忽略的一点：mask 渐变的起止位置单位用百分比最安全，用
或
在响应式场景下极易错位。
opacitytransitionopacitybg-gradient-to-rmask-webkit-mask
mask-right-20tailwind.config.js-webkit-maskto rightbg-opacity-0-webkit-maskmaskhover:opacity-0 hover:opacity-100 transition-opacitytransition-webkit-mask-positionbackground-positionopacitymasktransitionmask-positionbackground-positionz-indexpointer-events: nonebackdrop-filtermask.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)maskbackdrop-filteropacitypxrem