css——文字实现渐变色的两种方案

在CSS中，实现文字渐变色可以使用线性渐变（linear-gradient）或径向渐变（radial-gradient）。以下是两种方案的示例代码：

方案一：使用线性渐变（linear-gradient）

.gradient-text-linear {
  background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

方案二：使用径向渐变（radial-gradient）

.gradient-text-radial {
  background: radial-gradient(circle, #30CFD0 0%, #330867 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在这两种方案中，我们首先为元素设置背景渐变。然后，我们使用 -webkit-background-clip: text; 确保渐变背景仅应用于文本，并使用 -webkit-text-fill-color: transparent; 让文字的填充颜色透明，从而显示出背景渐变的效果。需要注意的是，-webkit-text-fill-color: transparent; 是一个非标准属性，主要用于WebKit内核的浏览器，因此在使用时需要考虑兼容性问题。