如何设置CSS背景裁切，仅让文字内部显示特定颜色？

本文共计848个文字，预计阅读时间需要4分钟。

直接写+background-clip: text;不会生效，必须配合+-webkit-background-clip: text;和+color: transparent;才能显示文字裁剪效果。这是WebKit内核的私有行为，Chrome、Safari、Edge新版本支持，Firefox目前尚未支持（截至2024年稳定版）。

常见错误现象：background-clip: text 写了但文字还是纯色、渐变没透出来、控制台没报错但视觉毫无变化。

• 漏掉 -webkit-background-clip: text —— 现代 Chrome/Safari 必须带前缀才认
• 忘了设 color: transparent —— 否则文字颜色会盖住背景，裁切无从谈起
• 用了 background-color 而非 background-image（如线性渐变）—— 单色背景无法体现“裁切”效果

怎么让文字显示渐变色而不是纯色背景

核心是用 background-image 定义渐变，再通过 background-clip 把它“钉”在文字轮廓里。不能靠 background-color，它没有形状可裁。