知识点
- background: -webkit-linear-gradient ： 渐变背景
- background-clip： 背景图片裁剪范围
- text-fill-color： 文本填充颜色
效果
image.png
代码
<span class="linearGradient">文字渐变色</span>
.linearGradient {
display: inline-block;
height: 80px;
font-size: 50px;
font-weight: 600;
// 渐变背景
background: -webkit-linear-gradient( 120deg, #02a4ff 30%, #00c5d9);
// 文字的范围来裁剪背景图片
-webkit-background-clip: text;
background-clip: text;
// 文本填充颜色
-webkit-text-fill-color: transparent;
}
