背景渐变色,多重渐变背景色,在前端领域的使用越来越常见,以及前段时间分享的《CSS多姿多彩的渐变色,前端还需要PS吗?》,通过css就可以制作漂亮的渐变色卡,让前端不再依靠图片实现复杂的效果图,文字渐变也是一样的,通过代码就可以实现。
CSS3实现文字渐变效果,兼容性最强系列!-Qui-Note
一张图片最小不得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,从前端做起!哈哈哈。。。