用css實(shí)現(xiàn)文字字體顏色漸變的三種方法分享。

第一種：

/*實(shí)現(xiàn)文字顏色從紅到黃的線性漸變效果*/
.gradient-text {
  background: linear-gradient(to right, #ff0000, #ffff00); /*設(shè)置漸變的方向從左到右 顏色從ff0000到ffff00*/
  -webkit-background-clip: text;/*將設(shè)置的背景顏色限制在文字中*/
  -webkit-text-fill-color: transparent;/*給文字設(shè)置成透明*/
}

第二種：SVG圖像實(shí)現(xiàn)text-fill-color(兼容性不好，不推薦)

/*利用SVG圖像實(shí)現(xiàn)文字顏色從藍(lán)到白的漸變效果*/
.gradient-color {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/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屬性實(shí)現(xiàn)文字顏色從綠到白的漸變效果*/
.gradient-color {
  background-image: linear-gradient(to right, green, white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

background-clip是CSS3中新增的屬性，可以用于指定背景圖片或顏色的繪制范圍。

以上三種方法都可以實(shí)現(xiàn)文字的顏色漸變，你學(xué)會(huì)了嗎。

掃描二維碼手機(jī)查看該文章