bg-gradient-to-t 不能实现真正的渐变消失，它仅定义渐变方向；真正淡出需用 opacity + transition，配合 transitionend 或 setTimeout 才能彻底移除元素。
用
做渐变消失？不行，这是常见误解
直接说结论：
本身不控制透明度，它只定义背景色的渐变方向和颜色停点。想让元素“渐变消失”，靠纯
加透明色（比如
）只能做出**视觉上的顶部淡化效果**，但元素本身依然占据空间、响应事件、无法真正“淡出隐藏”。这不是动画，也不是过渡，更不是 DOM 移除前的 fade-out 效果。
真正实现“渐变消失”得靠
+
要让元素平滑地从可见到不可见，核心是改
，再配合
。渐变感只是视觉错觉，实际靠的是 opacity 线性变化 + 人眼对边缘弱对比的感知偏差。
→
是标准做法，浏览器原生支持且性能好
必须显式声明
，否则没动画
如果想在消失后彻底移除元素，得监听
事件或用
，否则
的元素仍占布局、挡点击
Tailwind 中可直接用
、
、
组合
配
的真实用途
它适合做“内容区域顶部软化收边”，比如长列表滚动时顶部自然隐去，或卡片内容溢出时柔化边界——但前提是：背景本身是纯色/单色，且容器有固定高度或 overflow-hidden。
典型写法：
（注意：
和
是 Tailwind 的 opacity 后缀，不是 CSS 原生语法）
不能替代
动画，因为 gradient 是静态背景图层，不参与元素整体透明度计算
在深色模式下容易翻车：如果
在暗背景下变成灰黑，渐变会断层，建议用
或明确色值
移动端 Safari 对
渲染偶有闪烁，可加
缓解
想模拟“从下往上渐隐消失”？得组合动效
单纯方向类渐变类工具（如
）做不到动态消失。真要这种效果，得靠 transform + opacity 联动：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
初始状态：
消失中：
（向下微移强化“沉下去”的感知）
必须配
，否则只有 opacity 动，缺乏方向感
别用
模拟——缩放会挤压文字，失真明显；
更轻量、更可控
最常被忽略的一点：渐变消失从来不是单一样式能搞定的事。它要么是视觉修饰（gradient），要么是交互反馈（opacity + transition），要么是动效叙事（transform + opacity）。混用但不混淆，才是关键。
bg-gradient-to-tbg-gradient-to-tbg-gradient-to-ttransparentopacitytransitionopacitytransitionopacity: 1opacity: 0transition: opacity 0.3s easetransitionendsetTimeoutopacity: 0transition-opacityduration-300ease-in-outbg-gradient-to-ttransparentbg-gradient-to-t from-transparent via-white/0 to-white/80/0/80opacityvia-white/0via-bg/0from-transparentwill-change: backgroundbg-gradient-to-topacity-100 translate-y-0opacity-0 translate-y-4transition-all duration-500 ease-outscaletranslateY