不能靠bg-gradient工具类实现断点渐变淡入，因其无动画能力且不响应断点；必须用@media控制启用时机，并结合opacity或background-image的transition实现淡入效果。
不能靠 bg-gradient 工具类直接实现“断点处渐变淡入”——它没有动画能力，也不响应断点；必须用 @media 控制渐变启用时机，再叠加 transition 和 opacity 或 background-image 的 CSS 动画逻辑。
为什么 bg-gradient + d-md-block 不是淡入
这个组合只是让元素在 md 断点“突然显示”，不是背景渐变“淡入”。d-md-block 切换的是 display，而 display 无法被 transition 过渡——浏览器不支持对 display 做平滑变化。你看到的永远是“啪一下出现”，不是淡入。
-
bg-gradient-primary本身无断点、无动画，只注入background-image: linear-gradient(...) - 加
d-none d-md-block后，小屏时整个元素不可见（display: none），大屏时瞬间可见（display: block） - 即使你在 class 上写了
transition: all 0.3s，display属性也不会动
真正可行的淡入方案：用 opacity + transition 控制显隐
把渐变背景和淡入行为拆开：渐变始终存在（但初始透明），断点触发后通过 opacity 过渡显形。这样既满足“仅在断点启用”的语义，又能视觉上淡入。
- 基础态（小屏）设
opacity: 0，同时保留background-image，避免重绘抖动 - 在
@media (min-width: 768px)中设opacity: 1，并声明transition: opacity 0.4s ease-in-out - 必须给元素设
will-change: opacity（可选但推荐），提升动画帧率 - 别用
visibility: hidden替代opacity: 0——visibility也不能过渡
.hero-section {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
opacity: 0;
transition: opacity 0.4s ease-in-out;
will-change: opacity;
}
@media (min-width: 768px) {
.hero-section {
opacity: 1;
}
}
进阶：用 background-image 本身做淡入（更精准但兼容性略低）
如果不想影响整个元素的透明度（比如里面文字、按钮也要保持不透明），就得让渐变层自己淡入。这需要把渐变写成 background-image 的一部分，并配合 background-color 做 fallback，再用 transition 控制其 alpha 通道——但 CSS 不允许直接过渡 background-image，所以得曲线救国。
- 小屏：只设
background-color: #fff，background-image: none - md 断点起：用
background-image: linear-gradient(rgba(13,110,237,0.8), rgba(111,66,193,0.8))，并加transition: background-image 0.4s - ⚠️ 注意：
transition对background-image的支持在 Safari 15.4+ 才稳定，旧版 Safari 会跳变 - 更稳妥的做法是用两层容器：外层固定背景色，内层绝对定位、带渐变和
opacity过渡
容易被忽略的关键点
淡入效果是否生效，往往卡在三个细节上：
-
transition必须写在基础选择器里（如.hero-section），不能只写在@media块内，否则小屏没过渡属性，大屏切过去就是硬切 - 如果父容器有
overflow: hidden，而渐变容器用了position: absolute，可能被裁掉——要检查 computed styles 中的clip-path和overflow - 深色模式下，
prefers-color-scheme: dark里的渐变颜色没同步更新，淡入后可能文字对比度崩坏，需单独补媒体查询
