bootstrap按钮需用!important覆盖background-color并重写:hover/:active伪类，或改用background-image+transparent方案，同时适配深色模式与移动端点击反馈。
Bootstrap按钮默认不支持background: linear-gradient()直接覆盖
因为Bootstrap（尤其是v5+）给.btn类设置了background-color和border，且用!important锁死了部分状态（比如:hover、:active），直接写background: linear-gradient(...)会被覆盖或失效。
实操建议：
- 必须用
!important强行覆盖background-color，否则渐变不出效果 - 同时重写
:hover和:active伪类，不然鼠标移上去会退回到纯色 - 避免用
.btn-primary这类内置类叠加自定义样式——优先用独立类名，比如.btn-gradient，防止CSS权重冲突
示例：
.btn-gradient {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
border: none !important;
}
.btn-gradient:hover {
background: linear-gradient(135deg, #5a0fa0 0%, #1a66e0 100%) !important;
}
.btn-gradient:active {
background: linear-gradient(135deg, #4a0a80 0%, #0f55c0 100%) !important;
}
用background-image替代background更稳妥
某些Bootstrap版本（如v4.6）对background简写属性解析严格，linear-gradient可能被当作background-image值，但又被background-color覆盖。直接操作background-image能绕过这个干扰。
实操建议：
- 把渐变写进
background-image，保留background-color: transparent（而非删掉） - 这样
:disabled状态仍可正常响应，不会因background-color丢失而变白 - 兼容性更好，连IE10都认
background-image: linear-gradient(...)
示例：
.btn-gradient-alt {
background-color: transparent !important;
background-image: linear-gradient(135deg, #ff9a9e, #fad0c4) !important;
border: 1px solid rgba(255,255,255,0.3);
}
移动端点击无反馈？补全-webkit-tap-highlight-color
在iOS Safari或安卓WebView里，带linear-gradient的按钮点下去常没压感，不是代码问题，是系统高亮色被遮盖了。
实操建议：
- 加一句
-webkit-tap-highlight-color: rgba(0,0,0,0.1)，让点击时有半透灰反馈 - 别用
transparent——那会让点击完全“失重”，用户不确定是否点中 - 这个样式要写在按钮基础类里，不能只放在
:active里
渐变色按钮在深色模式下容易糊成一片
如果项目启用了@media (prefers-color-scheme: dark)，而你没重置渐变色，浅色渐变（比如#fff → #eee）在深背景上几乎看不见。
实操建议：
- 深色模式下改用反向对比度的渐变，例如
hsl(220, 30%, 20%) → hsl(220, 30%, 35%) - 别依赖
color-mode工具类自动适配——Bootstrap的data-bs-theme="dark"不接管background-image - 用
CSS custom property托管颜色值，方便统一换算，比如--grad-start: #6a11cb
!important、状态伪类、主题逻辑、移动端交互层层咬合——漏掉任一环，按钮就只是“看起来像渐变”，点不动、不响应、换主题就消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
