css文字渐变的实现

比较了几种方案，个人觉得background-image结合background-clip是最佳的实现方案。
原理：color把文字变透明，用background-image设置渐变作为背景，用background-clip来裁切背景，裁切的范围正好是文字的显示范围。
举例：

<div class="charge-btn">       
    <p>领取奖励</p>
</div>

.charge-btn p{
    height: 50px;
	width: 100px;
	-webkit-background-clip:text; 
	color:transparent; 
	background-image: linear-gradient(to top,red,blue);  
	border:1px solid #ccc;
}

效果如下：

参考文章：

【你真的理解CSS的linear-gradient？】
【通过CSS实现 文字渐变色 的两种方式】