<p>background-clip: text 起作用需满足：display 为 inline 或 inline-block，且 color: transparent；旧版 Safari 需加 -webkit- 前缀并配 -webkit-text-fill-color: transparent；Firefox 不支持，应改用 mask-image 模拟。</p>
background-clip: text 不起作用？先检查 display 和 color
直接写 background-clip: text 却看不到渐变文字，大概率是这两个属性没配对：元素必须是 display: inline 或 inline-block，且原始文字颜色得设成 transparent。浏览器默认把文字当不透明色块盖在背景上，不透明就裁不着背景。
常见错误现象：background-image 显示了，但文字还是纯黑/纯白；开发者工具里看到 background-clip 被划掉（invalid）。
-
color: transparent是硬性前提，缺一不可 - 避免用
block元素（比如<div>）直接套，加display: inline-block更稳妥 - 旧版 Safari 需要
-webkit-background-clip: text，且必须和-webkit-text-fill-color: transparent一起用
渐变背景用 linear-gradient 还是 url()？选前者更可控
文字渐变本质是把渐变当背景图，再用 background-clip 把它“抠”进文字轮廓。用 linear-gradient() 写在 CSS 里，比引用 SVG 或图片更轻量、易维护、支持动态修改。
使用场景：标题、按钮文字、数据看板关键指标——需要高频复用或响应式调整角度/色标时。
立即学习“前端免费学习笔记（深入）”；
- 角度写法推荐用
to right或to bottom，比具体度数（如90deg）更直观、可读性强 - 多色停靠点别堆太密，
background: linear-gradient(to right, #ff6b6b, #4ecdc4, #44b5b1)就够用，三色以内视觉最稳 - 慎用
repeating-linear-gradient，容易在小字号下出现色带断裂，尤其在 Windows + Chrome 下
Firefox 不支持 background-clip: text？用 mask-image 替代方案
Firefox 目前仍不支持标准的 background-clip: text（包括带前缀的 -webkit-），但可以用 mask-image 模拟相同效果，原理是用文字形状当蒙版，让渐变背景透出来。
参数差异：mask-image 的值写法和 background-image 几乎一致，但需注意 Firefox 对 mask-border 等相关属性支持有限，只用 mask-image + mask-size 就够。
- 基础写法：
mask-image: linear-gradient(to right, black, black); mask-size: 100% 100%;（黑色区域显示背景，透明区域隐藏） - 必须搭配
color: transparent，否则文字本色会覆盖背景 - 性能影响：mask-image 在低配设备上滚动时偶有闪烁，建议加
will-change: transform微调
字体粗细、抗锯齿会影响渐变边缘？优先关掉 font-smoothing
某些字体（尤其是非等宽、带描边感的字重）在应用渐变后，边缘会出现模糊、毛边或色阶断层，根源常是系统级抗锯齿策略干扰了背景裁剪的像素对齐。
容易踩的坑：在 macOS 上用 -webkit-font-smoothing: antialiased 反而加重问题；Windows 的 ClearType 也会让渐变过渡不自然。
- 统一关掉：加
-webkit-font-smoothing: none和-moz-osx-font-smoothing: grayscale - 如果必须保留可读性，改用
text-rendering: optimizeLegibility，它对渐变文字更友好 - 小字号（≤14px）慎用渐变，实际渲染中色带极易糊成一片，不如换高对比度纯色
真正麻烦的是混合字体栈和 variable font 的场景——不同字重下 mask 边缘偏移可能差 1px，这种细节没法靠 CSS 自动对齐，得靠设计侧收敛字重范围。
