實現文字顏色漸變

前言

　　主要用到三個CSS屬性：

1. 　　linear-gradient()  用來實現漸變的圖像
2.        background-clip 指定對象的背景圖像向外裁剪的區域
3.        text-fill-color 指定文字的填充顏色

實例

      background: linear-gradient(to bottom,#fff 0%,#333 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;

　　linear-gradient()可以指定漸變角度和顏色，例子中是從上至下的顏色變換

　　background-clip:text 已文字的形狀作為裁剪區域

　　text-fill-color:transparent 文字的填充色是透明的

 

　　效果如下:

　　

　　　　

兼容性

　　

　　chrome和較新版本的firefox都支持background-clip和text-fill-color屬性，需加 -webkit- 前綴

　　IE都不支持 background-clip屬性的text值