background-clip实现渐变文字

实现思路

• 渐变效果采用linear-gradient实现，但是它只能设在background-image属性上
• background-clip的含义是背景图片切割，当值设为text时，背景图片将根据文字轮廓进行切割
• 切割完成后，切割好的新背景图片被挡在文字下方，将文字的颜色设为透明即可让根据文字轮廓切割的背景图显露出来
• 这个属性兼容性非常不错，但是偏偏在webkit内核下一定要加前缀才生效

代码

注：以下为vue代码，如果你在工程项目中设置了postcss自动添加浏览器前缀(autoprefixer)，此处可以不添加-webkit前缀；否则，必须添加。