CSS实现文字字体颜色渐变的三种方法

/*完成笔墨色彩从红到黄的线性突变功效*/
.gradient-text {
  background: linear-gradient(to right, #ff0000, #ffff00); /*配备突变的标的目的从右到左 色彩从ff0000到ffff00*/
  -webkit-background-clip: text;/*将设备的配景色彩限定正在翰墨外*/
  -webkit-text-fill-color: transparent;/*给翰墨设施成通明*/
}

/*使用SVG图象完成翰墨色彩从蓝到黑的突变结果*/
.gradient-color {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/二000/svg"><linearGradient id="Gradient"><stop offset="0%" stop-color="blue"/><stop offset="100%" stop-color="white"/></linearGradient><mask id="Mask"><text x="0" y="50%" dy=".35em">Gradients are awesome!</text></mask><rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient)" mask="url(#Mask)"/></svg>');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*使用background-clip属性完成笔墨色采从绿到利剑的突变成果*/
.gradient-color {
  background-image: linear-gradient(to right, green, white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}