css字体颜色渐变

作者：浪子无家发布日期:2026-01-05 浏览:23

/* CSS字体颜色渐变示例 */

h1 {
  background: -webkit-linear-gradient(#ff7e5f, #feb47b); /* 设置背景为线性渐变，从#ff7e5f到#feb47b */
  -webkit-background-clip: text; /* 使用背景剪裁文本 */
  -webkit-text-fill-color: transparent; /* 文本填充颜色设置为透明，使背景渐变显示出来 */
}

解释说明：

background: -webkit-linear-gradient(#ff7e5f, #feb47b);：这行代码设置了元素的背景为线性渐变，颜色从 #ff7e5f（一种橙红色）逐渐过渡到 #feb47b（一种橙黄色）。
-webkit-background-clip: text;：这行代码的作用是将背景剪裁为文本形状，使得只有文本部分显示背景颜色，而其他部分保持透明。
-webkit-text-fill-color: transparent;：这行代码将文本的颜色设置为透明，从而使背景渐变效果透过文本显示出来。

通过以上三行代码的组合，可以实现字体颜色的渐变效果。

上一篇：css 伪元素

下一篇：css has