css 实现字体渐变

如何使用 css 为文本添加渐变效果？

问题：

如何为

元素添加背景渐变，并仅对文本应用效果？

立即学习“前端免费学习笔记（深入）”；

答案：

可以使用以下 css 代码：

p {
  background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
}

解释：

1. background-image 属性指定渐变效果，使用 -webkit-linear-gradient 函数创建从红色、橙色到黄色的渐变。
2. background-clip:text 属性将背景图像剪切为文本形状，使其仅影响文本。
3. text-fill-color:transparent 属性将文本填充颜色设置为透明，以便显示渐变效果。