[CSS] 字体渐变色

实现思路：

1. 盒子设置为inline-block，这样盒子的大小就由文本量决定；
2. 盒子背景图片使用linear-gradient设置渐变色；
3. 设置background-clip: text;使用文字区域截取背景；
4. 此时文字覆盖在背景上方，只能看到原本纯色的文字，设置文本颜色为透明：color:transparent;，就能看到底部的渐变色的文字。

参考代码：

.gradient-font{
    font-size: 3.5rem;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    background-image: linear-gradient(to right, #7ed56f, #28b485);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.2rem;
}

这种方法适用于 iconfont。