css字体渐变

作者：至尊巅峰发布日期:2026-03-27 浏览:40

/* CSS 字体渐变示例代码 */

h1 {
  background: -webkit-linear-gradient(#eee, #333); /* 兼容 Webkit 浏览器 */
  -webkit-background-clip: text; /* 将背景裁剪为文字形状 */
  -webkit-text-fill-color: transparent; /* 文字颜色设置为透明，显示背景渐变 */
}

解释说明：

background: -webkit-linear-gradient(#eee, #333);：定义了一个从浅灰色 (#eee) 到深灰色 (#333) 的线性渐变背景。
-webkit-background-clip: text;：将背景裁剪为文字的形状，使得背景只在文字部分显示。
-webkit-text-fill-color: transparent;：将文字的颜色设置为透明，从而让背景渐变效果透过文字显示出来。

这段代码可以让文字呈现出从浅到深的渐变效果。

上一篇：css animation 循环播放

下一篇：css溢出文字隐藏显示省略号