实现思路
- 渐变效果采用
linear-gradient实现，但是它只能设在background-image属性上 background-clip的含义是背景图片切割，当值设为text时，背景图片将根据文字轮廓进行切割- 切割完成后，切割好的新背景图片被挡在文字下方，将文字的颜色设为透明即可让根据文字轮廓切割的背景图显露出来
- 这个属性兼容性非常不错，但是偏偏在
webkit内核下一定要加前缀才生效
代码
注：以下为vue代码，如果你在工程项目中设置了postcss自动添加浏览器前缀(autoprefixer)，此处可以不添加
-webkit前缀；否则，必须添加。
<template>
<div>
<h1>loaning-moon</h1>
</div>
</template>
<style lang="less" scoped>
h1 {
font-size: 60px;
background-image: linear-gradient(to bottom, red, yellow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
效果
关于兼容性
我尝试了火狐，谷歌，safari，手机QQ浏览器，手机百度浏览器，安卓自带浏览器，均能正常显示。从Can I use官方查询的数据来看，连ie也能正常使用，所以我认为这个属性的兼容性是非常不错，可以放心使用，唯独要注意-webkit前缀的问题。