html渐变不兼容 CSS3实现文字渐变效果 兼容性最强系列！

背景渐变色，多重渐变背景色，在前端领域的使用越来越常见，以及前段时间分享的《CSS多姿多彩的渐变色，前端还需要PS吗？》，通过css就可以制作漂亮的渐变色卡，让前端不再依靠图片实现复杂的效果图，文字渐变也是一样的，通过代码就可以实现。

一张图片最小不得10kb？特别是颜色越多，色彩模式越丰富，最后图片越大！！！不信，你去试试。

所以，前端还是要有点料呢，不然打开你的网站，卡的跟50年代的火车一样，是不是有点low。

文字渐变色效果实现代码：

h3{

display: inline-block;

font:32px "微软雅黑";

font-weight: 800;

background: linear-gradient(45deg, #228DFD 20%, #00CF00 60%, #F45749 80%);

background-clip: text;

-webkit-background-clip: text;

color:transparent;

-webkit-text-fill-color: transparent;

}

color和text-fill-color将文字颜色设为透明；background-clip，实现文字剪切蒙版效果！这样就实现了下面的文字渐变效果啦！

文字渐变兼容性

兼容性的话，测试了谷歌、火狐、QQ、Edge、IE、360，依旧是ie不支持，对于当前现代浏览器来说，已经很不错了，拒绝IE，从前端做起！哈哈哈。。。