.gradient-font { background-image: linear-gradient(to right, red, yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
首先,大家创建了一个具有渐变效果的背景图像,它从红色渐变到黄色。 大家通过指定渐变的方向(从左到右)来实现这一效果。
大家之后设置 -webkit-background-clip 和 background-clip 属性为text。 这将使背景图像限制在文本内部。 最后,通过将字体颜色设置为透明,大家可以让渐变的背景图像成为大家的实际文本内容。
将上述代码添加到您的CSS文件中,并将 .gradient-font 类添加到任何需要渐变字体效果的文本块中。 您可以根据需要修改颜色和方向以创建您喜欢的渐变效果。