-webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
首先：最外层div设置一个渐变。
其次：用webkit-background-clip: text;以div的文字作为裁剪区域向外裁剪；
最后：把文字变透明：使用color: transparent; 这样即可实现文字的渐变效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字渐变</title>
<style type="text/css">
#test{
margin: 0 auto;
width: 300px;
height: 100px;
/*重点下面三个*/
background: -webkit-linear-gradient(left,red,orange,blue,green);
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div id="test">
测试文字测试文字测试文字测试文字
</div>
</body>
</html>
