bootstrap 4 不支持断点前缀的渐变或混合模式类，所有 bg-gradient-* 和 mix-blend-mode 行为需手动通过媒体查询控制，且必须避免工具类组合；bg-gradient-primary 等类全局生效、无响应逻辑，mix-blend-mode 需配合 isolation 与 background-blend-mode 在媒体查询中分层启用。
Bootstrap 4 完全不支持断点前缀的渐变类或混合模式类（如 bg-gradient-md 或 mix-blend-mode-md），所有 bg-gradient-* 和 mix-blend-mode 相关行为都需手动用媒体查询控制，且不能依赖工具类组合。
Bootstrap 4 的 bg-gradient 类天生无断点逻辑
所有内置渐变类（如 bg-gradient-primary）在 Bootstrap 4 中都是全局生效的 CSS 规则，没有包裹任何 @media 查询。加 md:bg-gradient-primary 或 d-sm-none d-md-block 都不会让渐变“只在中屏启用”——前者是 Tailwind 语法，Bootstrap 4 完全不识别；后者只是切换元素显隐，不是切换渐变样式本身。
-
bg-gradient-primary本质是设置background-image: linear-gradient(135deg, #007bff, #0056b3)，方向固定、颜色写死、无响应能力 - 单独用
bg-gradient无效：它只是个开关，必须搭配至少一个bg-*类（如bg-primary）才生成颜色值 - 若在 SCSS 中设了
$enable-gradients: false，所有渐变类会静默失效，控制台无提示
用 @media 覆盖 background-image 实现断点渐变
最可靠的做法是绕过工具类，直接对目标容器写媒体查询，仅修改 background-image，避免用 background 简写清掉已有背景色或纹理。
- 小屏基础态必须写在媒体查询外，例如：
.hero { background-color: #fff; } - 中屏起覆盖渐变：
@media (min-width: 768px) { .hero { background-image: linear-gradient(90deg, #007bff, #28a745); } } - 断点值严格对齐 Bootstrap 4 的
md：768px（不是 767px 或 770px） - 方向优先用角度（
90deg表示从左到右），比to right兼容性更稳，尤其在旧版 Safari 中 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000格式比50%, #000更友好
mix-blend-mode 无法响应断点，必须用 isolation + 媒体查询组合
mix-blend-mode 不能直接作用于 <img>（替换元素），也不能靠断点类触发。真正在不同断点启用混合效果，需两层控制：容器隔离 + 媒体查询控制背景层。
- 给外层容器加
isolation: isolate，防止混合外溢到兄弟元素 - 把图片作为
background-image写入该容器，并叠加一层渐变背景（如linear-gradient(rgba(0,0,0,0.3), transparent)） - 用
background-blend-mode: multiply替代mix-blend-mode，它可被媒体查询控制 - 例如仅在
lg及以上启用混合：@media (min-width: 992px) { .blend-container { background-blend-mode: overlay; } } - 禁用
background-color—— 它会创建独立 stacking context，阻断混合链
容易被忽略的降级与兼容细节
渐变和混合模式叠加后，文字对比度、子元素遮挡、深色模式适配都会立刻暴露问题，不是样式没生效，而是视觉逻辑断裂。
- 渐变一加上，
text-dark在浅色渐变上常跌破 WCAG 4.5:1，必须同步改文字色：text-white配深渐变，text-dark配浅渐变 -
.card、.container等默认有白色背景，会完全盖住父容器渐变 —— 改成background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写渐变色，否则用户切主题后仍看到亮色系 - 任何祖先元素用了
opacity 或 <code>transform（如 Bootstrap 4 的.alert、.dropdown），都会中断混合链
