正确做法是用媒体查询重置 background-image：小屏设 background-image: none，大屏再启用渐变；需同步处理 :hover、:active 等伪类，并注意 css 选择器权重与 background-color 配合。
直接用 bg-gradient-* 类无法取消断点下的渐变
Bootstrap 5 的 bg-gradient-primary 这类工具类是全局生效的，没有媒体查询包裹。加 d-none d-md-block 或 d-md-none 只会控制元素显隐，不是“关掉渐变”——小屏时类依然存在，只是被其他背景色盖住或被隐藏了。更糟的是，如果父容器有 background-color: #fff，它会直接覆盖掉 background-image（即渐变），导致你以为“渐变没了”，其实是被遮住了。
正确做法：用媒体查询重置 background-image
核心逻辑是——小屏下把渐变清空，只留纯色；大屏再加回来。必须分开控制，不能依赖工具类组合。
- 先写基础态（小屏）：
.btn-custom { background-color: #0d6efd; background-image: none; } - 再在媒体查询里启用渐变：
@media (min-width: 768px) { .btn-custom { background-image: linear-gradient(135deg, #0d6efd, #6f42c1); } } - 务必用
background-image: none，而不是删掉该声明——否则小屏可能继承父级或默认的渐变图层 - 不要用
background: ...简写，它会无意中重置background-color或background-position，破坏按钮原有样式
按钮交互态（:hover、:active）也要同步处理
如果你只在默认态取消渐变，但 :hover 还保留 background-image，那鼠标移上去反而会“突然出现渐变”，体验割裂。
- 每个伪类都得单独写媒体查询，例如：
@media (min-width: 768px) { .btn-custom:hover { background-image: linear-gradient(...); } } -
:active必须显式定义，iOS Safari 和部分安卓 WebView 不会自动继承:hover的background-image - 小屏下所有交互态都应保持
background-image: none，避免意外触发
用 Sass 复用时注意断点变量和权重
如果项目用了 Bootstrap 5 的 Sass，推荐用 media-breakpoint-up 混合宏，比硬写 768px 更可靠：
@include media-breakpoint-up(md) {
.btn-custom {
background-image: linear-gradient(135deg, #0d6efd, #6f42c1);
}
}
但要注意：Bootstrap 的 .btn 类带 !important，你的自定义 CSS 选择器权重不够时，得加 !important 或提升层级（比如写成 .btn.btn-custom）。最常被忽略的是——忘了给 background-color: transparent 配合渐变，结果颜色层压在渐变上，怎么调都看不见效果。
