应使用 background-image: linear-gradient(to right, #4b6584, #00a8cc) 实现线性渐变，配合媒体查询在 min-width: 992px 时切为 to right，移动端保持 to bottom，并设置 background-repeat: no-repeat、background-position: center 和 background-size: 100% 100% 防止失真。
用 background-image 写线性渐变，别用 bg-gradient 类
Bootstrap 自带的 bg-gradient 工具类（如 bg-gradient-to-r）是 Tailwind 风格的写法，**原生 Bootstrap 5.x 并不支持**。直接加这类 class 不生效，浏览器会忽略。必须手动写 CSS 渐变，并配合媒体查询做响应式断点适配。
核心是用 background-image: linear-gradient(...)，方向参数用 to right（左到右），不是 90deg —— 后者在某些旧版 Safari 下有渲染偏差。
示例：
.hero-section {
background-image: linear-gradient(to right, #4b6584, #00a8cc);
}
响应式要靠媒体查询重写 background-image，不能只改颜色
渐变方向本身无法用 class 切换（比如“小屏竖着渐变、大屏横着渐变”），必须在不同断点里重新声明整个 background-image 值。
常见需求是：移动端从上到下（to bottom），桌面端从左到右（to right）。注意 Bootstrap 的断点名（如 md）只是参考，实际要用标准媒体查询语法：
-
min-width: 576px对应sm -
min-width: 768px对应md -
min-width: 992px对应lg
实操写法：
.hero-section {
background-image: linear-gradient(to bottom, #4b6584, #00a8cc);
}
@media (min-width: 992px) {
.hero-section {
background-image: linear-gradient(to right, #4b6584, #00a8cc);
}
}
用 background-size 和 background-attachment 防止渐变拉伸失真
如果容器高度随内容变化（比如 flex 容器或空 div），渐变可能被拉长、变淡甚至重复。关键要控制两个属性：
-
background-size: 200% 200%：让渐变区域比元素大一倍，再用background-position定位，避免小尺寸下色块突兀 -
background-attachment: fixed：防止滚动时渐变跟着动（尤其长页面），但注意 iOS Safari 对该属性支持不稳定，慎用 - 更稳妥的做法是加
background-repeat: no-repeat+background-position: center
完整推荐写法：
.hero-section {
background-image: linear-gradient(to right, #4b6584, #00a8cc);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
兼容性注意：IE 不支持 linear-gradient，但 Bootstrap 5 已放弃 IE
如果你项目还要求兼容 IE11，必须加 -ms-filter 或 fallback 背景色：background-color: #4b6584。不过 Bootstrap 5 官方已明确不支持 IE，所以只要确认项目最低支持浏览器是 Edge 16+/Chrome 63+/Firefox 60+，就无需降级写法。
真正容易被忽略的是 Safari 15.4 之前版本对 background-image 在 transform 元素里的渲染 bug —— 如果父容器用了 transform: translateZ(0) 或 scale()，渐变可能消失。遇到这种情况，把渐变移到伪元素 ::before 上更稳。
