css 字体颜色渐变的实现方法

设计人员为了页面的美观，常会有渐变色字体展示。

在css中实现方法有如下几种

1 使用background-clip

这是最简单的一种方式，也十分好理解。

在现有css中，没法将字体颜色直接设为渐变色，所以我们反向思考，将其背景设置为渐变色，裁去字体以外的部分，把字体颜色改为透明，这样就可以透过字体，看到背景色。就像是字体颜色是渐变色。

具体分为三步，如下：

1. 将背景色改为渐变色背景
   background-image: linear-gradient(red, blue);
2. 将背景裁剪为只显示字体部分

	background-clip: text;
 	-webkit-background-clip: text;

3. 将字体颜色设置为透明
   color: transparent;

代码：
html:

    <div class="demo1">你好，LINA！</div>

css：

 .demo1 {
        height: 300px;
        width: 600px;
         line-height: 300px;
        font-size: 60pt;
        
        background-image: linear-gradient(red, blue);
       
        background-clip: text;
        -webkit-background-clip: text;
        
        color: transparent;
    }

结果：

2

---

参考：

1.【小tip:CSS3下的渐变文字效果实现】https://www.zhangxinxu.com/wordpress/2011/04/%e5%b0%8ftipcss3%e4%b8%8b%e7%9a%84%e6%b8%90%e5%8f%98%e6%96%87%e5%ad%97%e6%95%88%e6%9e%9c%e5%ae%9e%e7%8e%b0/

2.【css文字颜色渐变的3种实现】https://www.jianshu.com/p/4fa116fc4653