直接加 bg-gradient 对 .list-group-item.active 无效，因 bootstrap 5 的该类仅设 background-color 且未声明 background-image，而 bg-gradient 类需配合基础背景色类才生效；必须用自定义 css 显式覆盖，默认、悬停、禁用三态均需单独设置 background-image 并保留 background-color: transparent !important，同时调整文字颜色、边框及深色模式适配，并补全 :active 和 -webkit-tap-highlight-color 以保障移动端点击反馈。
为什么直接加 bg-gradient 对 .list-group-item.active 无效
因为 Bootstrap 5 的 .list-group-item.active 默认只设 background-color，没声明 background-image，而 bg-gradient-primary 这类类只在搭配基础颜色类（如 bg-primary）时才注入渐变，但 .active 是独立状态类，不触发该逻辑。你加了 bg-gradient 也没用——它根本没绑定到 .active 上。
.list-group-item.active 必须用 CSS 类显式覆盖
不能靠组合工具类，得写自定义规则，且必须处理三个关键状态：默认激活态、悬停、禁用。常见错误是只改默认态，结果鼠标一移上去就退成纯色。
- 用
background-image: linear-gradient()而不是background: linear-gradient()，避免意外清掉background-color导致:disabled时背景变白 - 必须同时设
background-color: transparent !important，否则某些版本 Bootstrap 会用background-color覆盖渐变 -
:hover和:disabled状态要单独重写，且渐变方向/色标保持一致，否则视觉跳变明显 - 示例：
.list-group-item.active {
background-color: transparent !important;
background-image: linear-gradient(135deg, #6a11cb, #2575fc) !important;
}
.list-group-item.active:hover {
background-image: linear-gradient(135deg, #5a0fa0, #1a66e0) !important;
}
.list-group-item.active:disabled {
background-image: linear-gradient(135deg, #4a0a80, #0f55c0) !important;
opacity: 0.7;
}
文字颜色和边框必须同步调整
原生 .list-group-item.active 的文字色（如 text-white）是按纯色背景设计的，换成浅渐变后对比度常低于 4.5:1，尤其在阳光直射屏幕时几乎不可读。
- 别依赖
text-white或text-dark—— 它们无法响应渐变色变化，应手动设color - 加一道实色边框（如
border: 1px solid rgba(106, 17, 203, 0.3)）能立刻提升辨识度 - 深色模式下，渐变色值写死会导致边框/文字发灰，建议用 CSS 变量定义起止色，并在
@media (prefers-color-scheme: dark)中重赋值
移动端点击反馈容易丢失
iOS Safari 在 :active 状态下会重置 background-image，导致渐变边框或背景瞬间消失，这不是你 CSS 写错了，而是系统行为。
- 必须补全
.list-group-item.active:active规则，且background-image值与默认态完全一致 - 加
-webkit-tap-highlight-color: transparent关闭原生点击蒙层，否则会盖住渐变 - 慎用
outline：Bootstrap 的.focus状态可能叠加 outline，压住边框，建议统一用box-shadow替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
