<p>Bootstrap 5 中 background-clip: text 无效是因为 .text- 类强制设置 color 覆盖渐变，需移除所有 .text- 类、显式设 color: transparent、加 -webkit- 前缀、用 @supports 提供降级。</p>
background-clip: text 在 Bootstrap 5 中无效？先清掉 .text-* 类
直接加 background-clip: text 没反应，不是 css 写错了，而是 bootstrap 的文字颜色类（比如 .text-primary、.text-white）会强制设置 color，盖掉你后续的渐变背景。必须手动移除所有这类 class。
实操建议：
- 删掉 HTML 中所有
.text-*类，一个都不能留 - 显式写
color: transparent—— 不要依赖继承或默认值 - 确保元素是内联级（如
<span>、<h3>），块级元素需加display: inline或inline-block - 如果用了
<button>或<a>，注意它们默认是内联级但可能有 user agent 样式干扰，建议用<span>或<div>+display: inline
-webkit-background-clip: text 是必须加的前缀
Chrome、Safari、Edge 新版都支持 background-clip: text，但不加 -webkit- 前缀，在 Safari 15.6–16.4 和部分旧版 WebView 中会完全失效。这不是“可选优化”，是硬性兼容要求。
最小可用写法示例：
.text-gradient {
background-image: linear-gradient(135deg, #0d6efd, #86b7fe);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}注意：
- 不要用
to right这类方向关键词，改用角度（如135deg），兼容性更稳 -
linear-gradient()必须带完整参数，不能只写颜色列表 - IE 和 Android 4.4 以下 WebView 完全不支持，别在核心文案上用
和 Bootstrap 渐变背景类（.bg-gradient-*）混用要小心
.bg-gradient-primary 这类类只作用于元素背景，不影响文字；想让文字也渐变，得另起一套规则，不能指望它“自动传导”到文字上。
常见误操作：
- 给
<div class="bg-gradient-primary"><h2 class="text-gradient">标题</h2></div>—— 行不通，.text-gradient的渐变和父级背景无关 - 试图用
text-bg-primary配合background-clip——text-bg-*是背景色+自动配色逻辑，和渐变文本冲突 - 在
.btn上强行加text-gradient—— 按钮有border、padding、box-shadow等干扰，剪辑区域容易错位
推荐场景：纯展示型标题、徽标文字、卡片 header，避开交互控件。
@supports 降级方案不是可选项，是上线前提
没加降级就上线，用户看到的就是一片透明文字——因为 color: transparent 生效了，但 background-clip: text 失效，渐变没显示，文字也没颜色。
必须写的降级逻辑：
.text-gradient {
color: #333; /* 默认 fallback 文字色 */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.text-gradient {
background-image: linear-gradient(135deg, #0d6efd, #86b7fe);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}关键点：
- 别用
@supports all或嵌套太深，部分旧浏览器解析失败 - fallback 色要和页面整体对比度协调，比如深背景配浅灰
#666，浅背景配深灰#333 - 移动端 WebView（尤其微信内置）版本碎片化严重，
@supports是唯一靠谱检测方式
真正麻烦的不是写法，是测试覆盖：iOS Safari 15.4、Android Chrome 102、微信 8.0.43 内置 X5 内核，表现各不相同。别信“应该能行”。
