<p>Bootstrap 4 的断点类不支持直接给渐变加阴影，因 .shadow- 类仅作用于元素盒阴影而非背景层；需用 ::before 伪元素绘制渐变并配合媒体查询控制 box-shadow，兼顾兼容性与响应式需求。</p>
Bootstrap 4 的断点类不支持直接给渐变加阴影
Bootstrap 4 的 .shadow- 类（如 .shadow-sm、.shadow）作用于元素整体，而 background-image: linear-gradient() 是背景层，CSS 阴影不会自动“套在渐变上”——它只对元素盒阴影生效。所谓“给渐变加阴影”，本质是让渐变背景看起来有层次感，需手动组合 CSS 层叠或伪元素。
用 ::before 伪元素模拟带阴影的渐变背景
这是最可控、兼容性好（Bootstrap 4 默认基于 IE10+）、且能响应式断点控制的方式：把渐变放在伪元素上，再叠加一层带 box-shadow 的遮罩或偏移层。
常见做法：
- 父容器设
position: relative，确保伪元素可定位 -
::before绘制渐变背景，并用z-index: -1置底 - 用媒体查询在断点处切换伪元素的
box-shadow值（例如md起加阴影，sm下去掉） - 避免直接给含渐变的
div加.shadow-，否则阴影会盖住渐变边缘，显得生硬
示例片段：
.grad-shadow {
position: relative;
}
.grad-shadow::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #007bff, #6f42c1);
z-index: -1;
}
@media (min-width: 768px) {
.grad-shadow::before {
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
}
@media (max-width: 767.98px) {
.grad-shadow::before {
box-shadow: none;
}
}
别依赖 background-blend-mode 混合阴影和渐变
有人尝试用 background-image: linear-gradient(), radial-gradient(circle at 10px 10px, rgba(0,0,0,.2) 0, transparent 20px) 模拟阴影，再配 background-blend-mode: multiply。但问题明显：
-
background-blend-mode在 IE 和旧版 Edge 完全不支持（Bootstrap 4 明确支持 IE10+） - 阴影位置、扩散不可控，响应式断点切换困难
- 多层背景叠加后，性能略降，尤其在移动端重绘频繁时
如果必须用 Bootstrap 工具类，优先改写 $enable-shadows
Bootstrap 4 的阴影类由 Sass 变量 $enable-shadows 控制。若项目全程用 Sass 编译，可在自定义断点处覆盖：
- 在
_custom.scss中重定义$shadow-sm、$shadow等变量 - 用
@include media-breakpoint-up(md)包裹新阴影声明 - 注意：这影响全局所有
.shadow-元素，不是仅限渐变容器
也就是说，这不是“给渐变加阴影”的解法，而是“让断点下的阴影更适配渐变背景容器”的妥协方案。
真正要精准控制，还是得回到伪元素 + 媒体查询的老办法——它不炫技，但稳定、可测、易调试。
