css实现文字渐变效果

使用-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，这样文字可以垂直居中，并且不会超出父元素的高度。设置行高的话，渐变背景相对于整个元素（包括行高形成的区域）都会应用，文字会在这个区域中居中，因此渐变会覆盖整个文字区域，就不会变淡了