css 字体渐变色

/* 使用 CSS 实现字体渐变色的示例代码 */

h1 {
  /* 使用 background-clip 和 webkit-background-clip 实现文本渐变 */
  background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 定义渐变背景 */
  -webkit-background-clip: text; /* WebKit 浏览器下剪裁背景为文字形状 */
  background-clip: text; /* 标准剪裁背景为文字形状 */
  color: transparent; /* 将文本颜色设置为透明，显示渐变背景 */
}

解释说明：

1. background: linear-gradient(90deg, #ff7e5f, #feb47b);：定义了一个从左到右（90度角）的线性渐变背景，颜色从 #ff7e5f 到 #feb47b。
2. -webkit-background-clip: text; 和 background-clip: text;：这两个属性用于将背景剪裁为文本的形状。-webkit-background-clip 是为了兼容 WebKit 内核的浏览器（如 Chrome 和 Safari），而 background-clip 是标准属性。
3. color: transparent;：将文本的颜色设置为透明，这样渐变背景就会透过文本显示出来。

通过这种方式，你可以实现带有渐变效果的文字。