css3实现字体渐变色

"value">渐变字体

第一种:

.value{
	font-size: 90rpx;
	font-weight: bold;
	background-image:-webkit-linear-gradient(bottom,#F884FF,#FEE2FF); 
	-webkit-background-clip:text; 
	-webkit-text-fill-color:transparent;
}

第一种方法在vue中使用的时候发现一个问题，在一些事件中改变目标文字的时候，会发现页面渲染不及时，第二种方法则不会。

.value{
	font-size: 90rpx;
	font-weight: bold;
	-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(white), to(rgba(210, 1, 160, 0.53)));
}

第二种方法对颜色值的写法比较苛刻，不能用16进制。