css 字体颜色渐变

/* 渐变字体颜色的实现需要使用到 CSS 的 background-clip 和 webkit-background-clip 属性，以及 linear-gradient 函数 */

h1 {
  /* 定义渐变背景 */
  background: linear-gradient(90deg, #ff7e5f, #feb47b);

  /* 设置背景裁剪区域为文本 */
  -webkit-background-clip: text;
  background-clip: text;

  /* 将字体颜色设置为透明，使背景渐变显示出来 */
  -webkit-text-fill-color: transparent;
}

/* 示例 HTML 代码 */
<!-- <h1>这是一个渐变字体颜色的标题</h1> -->

解释说明：

1. linear-gradient(90deg, #ff7e5f, #feb47b)：定义了一个从左到右（90度方向）的颜色渐变，起始颜色为 #ff7e5f，结束颜色为 #feb47b。
2. -webkit-background-clip: text; 和 background-clip: text;：将背景裁剪为文本形状，使得背景渐变只应用于文本部分。
3. -webkit-text-fill-color: transparent;：将文本颜色设置为透明，从而让背景渐变透过透明的文字显示出来。