字体图标变色

字体图标变色效果如下：（双箭头字体图标）

三步：

background: -webkit-linear-gradient(left, #5b69b0, #7588e0); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #5b69b0, #7588e0); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #5b69b0, #7588e0); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #5b69b0, #7588e0); /* 标准的语法 */
-webkit-background-clip: text;//规定背景的绘制区域
-webkit-text-fill-color: transparent;

这里说下background-clip: text

Clip 的意思为修剪，从字面意思上理解，background-clip 的意思即是背景裁剪。

简单而言，background-clip 的作用就是设置元素的背景（背景图片或颜色）的填充规则。

取值通常有 3 个取值：

{
    background-clip: border-box;  // 背景延伸到边框外沿（但是在边框之下）
    background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
    background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}

background-clip:content-box;

background-clip:padding-box;

background-clip:border-box;

不过这里想说的是 -webkit-background-clip:text;

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。