css字体图标颜色渐变---linear-gradient

                <div class="star iconfont">
                    <span class="icon-xingxing"></span>
                    <span class="icon-xingxing"></span>
                    <span class="icon-xingxing"></span>
                    <span class="icon-xingxing"></span>
                    <span class="icon-xingxing"></span>
                </div>

            .star {
                .icon-xingxing {
                    background-image: linear-gradient(180deg,
                            #ffa36a 1%,
                            #ff4b6b 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:

#grad { 
    background-image: linear-gradient(red, yellow, blue); 
}

背景颜色渐变-linear-gradient

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

CSS 语法 

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

 CSS3背景裁切属性-background-clip

值	说明
border-box	默认值。将边框以外的背景部分裁掉。
padding-box	将内边距以外的背景部分裁掉。
content-box	将内容以外的背景部分裁掉。
text	将文字轮廓以外的背景部分裁掉而只留下文字轮廓以内的部分，而此时我们只需要通过设置文字为透明色（-webkit-text-fill-color: transparent;）即可透过文字看到盒子背景色