css给文字设置可变颜色:

.text-gradient {
  background: linear-gradient(90deg, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

代码分析: 这个代码片段使用了 CSS 的渐变和剪裁属性来创建一个渐变文字效果。每个属性在实现这个效果中都有特定的作用：

1. background: linear-gradient(90deg, red, blue);

   • 这行代码为元素设置了一个线性渐变背景，从红色过渡到蓝色。
   • 90deg 表示渐变的角度，90度表示从左到右（水平）的渐变。
   • 如果你直接应用这个渐变背景在一个普通元素上，会看到元素背景从红色到蓝色的平滑过渡。

2. -webkit-background-clip: text;

   • background-clip 是一个 CSS 属性，指定背景应该在哪个部分显示。通常可以是 border、padding、content，但这里设置为 text。
   • 当 background-clip 设置为 text 时，背景只会显示在文字本身的区域，而不会出现在文字以外的地方。这样，文字就像是填充了渐变效果。
   • 这个属性前面带有 -webkit- 前缀，因为这是一个实验性的特性，主要在支持 WebKit 引擎（如 Chrome 和 Safari）的浏览器中使用。

3. -webkit-text-fill-color: transparent;

   • text-fill-color 是一个专门为文字设置颜色的属性，这里也带有 -webkit- 前缀。
   • 将 text-fill-color 设置为 transparent（透明）时，文字本身的颜色变得透明，这样底部的背景渐变才会显现出来。
   • 换句话说，这一行代码的作用是让文字本身没有颜色，以便背景渐变能够“透过”文字的形状显示出来。

总结

通过这三行代码的组合，你的文字看起来像是填充了一个从红色到蓝色的渐变。具体效果如下：

• 渐变背景通过 background 和 background-clip: text 属性被限制在文字区域内。
• 透明文字颜色通过 text-fill-color: transparent 让背景渐变得以透过文字。

最终，文字本身看起来就拥有了渐变效果，但实际是因为文字区域内显示了背景的渐变。