必须手写 background: linear-gradient() 实现自定义色彩渐变，bootstrap 5 无对应工具类；需单独定义高优先级 class，用角度值（如 135deg）和精确色-stop 控制过渡，配合 text-white、text-shadow 及 min-height: 100dvh 确保可读性与响应式稳定。
直接用 background 写线性渐变，别套 Bootstrap 的背景工具类
Bootstrap 5 的 bg-gradient 工具类只支持预设的黑白/灰度方向渐变（如 bg-gradient-to-r 是 Tailwind 风格，Bootstrap 5 实际不提供），它压根没有 bg-gradient-to-br 或自定义色-stop 功能。想实现带色彩过渡的 Hero 区，必须手写 CSS，用原生 background: linear-gradient(...)。
常见错误是以为加个 bg-dark 或 bg-primary 就能叠加渐变——不行，这些类会覆盖你写的 background 值。务必单独定义一个 class，且确保它的样式优先级足够高（比如加 !important 或写在 Bootstrap CSS 之后）。
- 推荐把渐变样式写在自定义 CSS 文件里，放在
bootstrap.min.css引入之后 - 避免用
style="..."行内写，否则响应式断点下难覆盖 - 渐变方向建议用角度（如
135deg）而非关键词（to bottom right），兼容性更稳
渐变色停点要手动控制，别依赖 bg-gradient 的默认值
Bootstrap 5 没有提供可配置色停点的工具类，所有颜色过渡位置、透明度、色值都得自己定。比如想让顶部偏蓝、底部偏紫，就得明确写出两个色-stop：
.hero-gradient {
background: linear-gradient(135deg, #4b65f6 0%, #8a2be2 100%);
}
如果需要中间留出文字区域的“透气感”，可以加透明色段：
.hero-gradient-fade {
background: linear-gradient(135deg, #4b65f6 0%, #4b65f6 40%, transparent 60%, #8a2be2 100%);
}
- 百分比数值决定过渡节奏：0%–40% 是纯蓝，40%–60% 是蓝到透的过渡，60%–100% 是透到紫
- 别用
rgba(…, 0.8)模拟半透效果——它会让整个背景变灰蒙，真正要的是色-stop 间的平滑插值 - 移动端小屏下渐变可能被压缩失真，建议在
@media (max-width: 768px)里重设角度或色值
文字层级和对比度容易翻车，得配合 text-white 和阴影
渐变背景一上，文字常看不清，尤其当浅色段落在文字正下方时。Bootstrap 的 text-white 只解决颜色，不解决可读性。必须加视觉锚点：
- 强制用
text-white+fw-bold提升文字重量 - 加
text-shadow: 0 2px 4px rgba(0,0,0,.3);让字在任意背景色上都有轮廓 - 如果用了透明渐变段，考虑给
.hero-content容器加backdrop-filter: blur(4px);（注意 Safari 需-webkit-backdrop-filter） - 别忘了检查 WCAG 对比度：深蓝(#4b65f6) 上白字 OK，但浅紫(#d9c7f0) 上白字就不及格，得换色或加遮罩层
响应式高度和垂直居中不能只靠 vh
写 min-height: 100vh 看似合理，但在 iOS Safari 或 Chrome 移动端，地址栏收放会导致 vh 动态变化，Hero 区忽高忽矮。稳妥做法是：
- 用
min-height: 100dvh（dvh是动态视口单位，已获主流浏览器支持） - 垂直居中别只靠
align-items-center，加d-flex flex-column justify-content-center到容器，并设min-height: 100dvh - 如果内容超出一屏，
100dvh会截断，此时改用min-height: 100vh并监听resize事件修正（小概率但需知悉）
渐变本身没逻辑复杂度，但和 Bootstrap 的栅格、间距、断点混用时，class 覆盖顺序、单位选择、对比度校验这三点最容易被跳过。动手前先打开 DevTools 的“Contrast”检查器，再改颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
