bootstrap 4 移动端背景渐变被遮挡主因是父容器 overflow: hidden、transform 创建 bfc 或栅格类裁剪；应加在无溢出/变换的独立 wrapper 或 .jumbotron 等顶层容器，并用 background+!important+标准语法声明，补 fallback 色与 min-height: 100vh。
Bootstrap 4 移动端背景渐变被遮挡，根本不是渐变本身的问题，而是层级、定位或容器裁剪导致的视觉截断——background 渐变再漂亮，一旦父容器设了 overflow: hidden 或创建了新层叠上下文（BFC），它就只能在框里“憋着”。
为什么渐变在移动端看起来像被切掉了一半
常见现象是：渐变从顶部开始，但到中部突然消失；或者只显示左上角一小块，其余被纯色或空白替代。这不是 CSS 写错了，而是以下任一条件触发了强制裁剪：
-
.card-body、.modal-body或自定义 wrapper 上写了overflow: hidden（哪怕只是为了清除浮动） - 父级元素用了
transform（比如scale(0.95)或translateZ(0)），隐式创建 BFC - 渐变加在
.container或.row上，而它们的padding和margin让实际渲染区域变小，且未配background-clip: padding-box - 没加
!important，被 Bootstrap 4 的高权重background-color规则覆盖（尤其在.alert类中）
渐变必须加在哪个元素上才不被截断
不能加在任何带 overflow、transform 或栅格类的中间容器上。可靠做法是：
- 用独立 wrapper：
<div class="bg-gradient"></div>，不套.container、.row、.card等 Bootstrap 布局类 - 如果必须嵌套，把渐变加在
.modal-content或.jumbotron这类语义明确、默认无overflow的顶层容器上 - 检查 computed styles，确认该元素的
overflow是visible，且没有transform值 - 若要用
.card，务必移除其overflow: hidden，并显式加position: relative（避免子元素absolute定位时基准错乱）
渐变声明怎么写才能真正生效
光写 background: linear-gradient(...) 不够，得对抗 Bootstrap 4 的样式权重和默认行为：
- 必须用
background（不是background-color），因为 Bootstrap 4 默认只设了background-color，background可完整覆盖 - 必须加
!important，否则被.alert-warning { background-color: #fff3cd !important }这类规则压垮 - 方向写标准语法：
to bottom、135deg，别写top to bottom（无效） - 至少两个颜色值：
linear-gradient(to bottom, #f8f9fa, #e9ecef)；只写一个就是纯色，不是渐变 - 移动端建议补一行降级：
background-color: #f8f9fa（fallback 色），防止旧浏览器解析失败后整块空白
容易被忽略的兼容细节
真机调试时，最常卡在这些地方：
- iOS Safari 15.4+ 对
background: linear-gradient()+!important的解析有微小延迟，若渐变加在快速滚动的区域（如.navbar），可能首帧闪白——解决方案是提前给该元素加will-change: background - 如果渐变容器高度靠内容撑开（比如只有文字），
min-height: 100vh必须加上，否则在短内容页，渐变只渲染几行就戛然而止 - 别在渐变元素上同时设
background-image和background渐变——后者会覆盖前者，但若你本意是“渐变叠加图片”，得用background: linear-gradient(...), url(...)合并写法 - 检查是否误启用了
prefers-reduced-motion媒体查询，某些定制主题会全局禁用渐变动画效果
