css 渐变字体

作者：醉眼看苍生发布日期:2025-04-23 浏览:148

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

h1 {
  /* 使用 background-clip 和 webkit-background-clip 实现渐变字体效果 */
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 解释说明：
1. `background: linear-gradient(...)`：定义了一个线性渐变背景，颜色从左上到右下依次变化。
2. `-webkit-background-clip: text` 和 `background-clip: text`：将背景裁剪为文本的形状，使得只有文本部分显示渐变颜色。
3. `color: transparent`：将文本的颜色设置为透明，以便渐变背景可以透过文本显示出来。
*/

上一篇：css背景图片等比例缩放

下一篇：css文字超长省略号