background-clip: text 不生效主因是未设 color: transparent；仅 WebKit 内核原生支持，Firefox 需加 -webkit 前缀及 -webkit-text-fill-color: transparent；推荐分层封装 SCSS 混合宏，base 处理透明与 clip，上层组合渐变；禁用 text-stroke 与 background-clip 同用；iOS 15.4 前需 JS 特性检测降级。
background-clip: text 为什么不起作用
直接写 background-clip: text 不生效，大概率是因为没关掉文字的默认填充色。浏览器会优先用 color 盖掉渐变背景，所以必须显式设成透明：color: transparent。另外这个属性只在 WebKit 内核下原生支持（Chrome/Safari/Edge），Firefox 需要加 -webkit-background-clip: text 并配合 -webkit-text-fill-color: transparent 才能 fallback。
SCSS 混合宏怎么封装才实用
别把所有参数都塞进一个混合宏里。实际用的时候，渐变方向、颜色停靠点、是否响应式经常变，但 background-clip 和 color 这两行几乎固定。推荐分层封装：
- 底层混合宏
@mixin gradient-text-base()：只处理透明化和 clip，不碰渐变本身 - 上层混合宏
@mixin gradient-text($direction, $colors...)：组合线性渐变 + base - 额外提供
@mixin gradient-text-radial(...)应对径向场景
这样改渐变函数时不用动基础逻辑，也方便单独覆盖某段文字的 fill color。
字体描边+渐变文字一起用会出什么问题
加了 text-shadow 或 -webkit-text-stroke 后，background-clip: text 的裁剪区域可能被干扰，尤其在字体较细或字号较小时，渐变边缘容易发虚或断开。解决办法只有两个：
- 把描边放在伪元素上（
::before叠一层纯色描边，主文字只做渐变） - 放弃描边，改用双层文字：外层深色文字 + 内层
background-clip渐变文字，用transform: translate(0, 0)对齐
注意：不要试图用 text-stroke 和 background-clip 同时作用于同一元素——渲染行为在各浏览器中不一致，Safari 可能完全不显示渐变。
移动端适配要注意哪些细节
iOS Safari 对 background-clip: text 的支持从 iOS 15.4 才真正稳定，旧版本会出现闪烁或回退为纯色。如果需要兼容 iOS 14 及更早，得加 JS 检测：
if ('webkitBackgroundClip' in document.documentElement.style) {
document.body.classList.add('supports-gradient-text');
}
然后 CSS 里用 .supports-gradient-text .title 来控制渐变文字，否则降级为普通 color。另外，动态字号（如 clamp()）和渐变文字混用时，某些 Android WebView 会重绘失败，建议固定最小字号或用媒体查询分段控制。
渐变文字本质是视觉增强，不是内容核心。别为了效果牺牲可读性或加载稳定性——比如用大图渐变背景 + 小字号文字，在弱网下文字可能先以默认色闪现再切渐变，体验反而更差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
