css 文字渐变

作者：不必假装在乎发布日期:2025-08-20 浏览:22

/* 使用 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;：将文字的颜色设置为透明，从而使渐变背景透过文字显示出来。

这个代码片段适用于现代浏览器，并且使用了 WebKit 前缀以确保兼容性。

上一篇：css字体颜色

下一篇：css单行文本溢出省略号