使用-webkit-background-clip: text实现文字渐变效果
-webkit-background-clip: text：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉
方式一：
1）最外层 div 设置一个渐变
2）用webkit-background-clip: text以 div 的文字作为裁剪区域向外裁剪
3）把文字变透明：color: transparent，这样即可实现文字的渐变效果
<span class="value" @click="parentClick()">测试文字</span>.value {// 渐变样式background: linear-gradient(to bottom, #ffffff 0%, #b7d0ff 100%);-webkit-background-clip: text;background-clip: text;color: transparent;
}
方式二：
.value { background-image: -webkit-linear-gradient(bottom,#fbc233, #ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}
设置高度height后渐变颜色被稀释
问题描述： 有一个父元素drawBox和一个子元素draw01，父元素设置了固定高度20px，子元素没有设置高度，设置字体大小14px。英文字母显示不全，下面有被遮挡，如果给子元素设置高度height: 20px，会导致渐变样式变淡
渐变样式设置代码：
.gradient-text-one { background-image: -webkit-linear-gradient(bottom,#fbc233, #ffffff);;-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}
渐变样式变淡如下图所示：
原因：
1）出现被遮挡的原因
通常由默认行高 line-height 过大导致，即使字体14px，浏览器默认行高可能达1.2倍，加上字体本身渲染高度，实际可能超出 20px 父容器
2）渐变样式变淡的原因
如果给子元素设置高度height: 20px，那么文字在容器内的位置可能会发生变化，比如默认基线对齐，导致文字偏上或偏下；而渐变背景是相对于元素背景区域的，如果文字没有在背景区域内居中，可能会只显示渐变的一部分，比如只显示到较暗的部分或较亮的部分，从而看起来变淡
解决方案： 给子元素设置行高line-height: 20px，这样文字可以垂直居中，并且不会超出父元素的高度。设置行高的话，渐变背景相对于整个元素（包括行高形成的区域）都会应用，文字会在这个区域中居中，因此渐变会覆盖整个文字区域，就不会变淡了
