文字颜色渐变

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
    -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
    -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */

以上三个属性少一个都不能完成文字渐变。效果图：

兼容性：

text-fill-color，IE果然又不兼容。移动端UC浏览器也不兼容。

 -webkit-background-clip: text; 非正式属性，目前（2017-07-07）仅仅FF、Chrome、Safari支持，并且必须带前缀。

 所以，如果您的目标用户很有可能会用IE浏览器，那么，就需要再写一个IE下能正常浏览的代码：

    <!--[if IE]>
        <h2>IE才能看见我</h2>
        <img src="images/text-gradient.png" alt="">
    <![endif]-->