1.利用CSS3设置div渐变色
.backDiv{
background: linear-gradient(to right bottom, #ccc , #fff); /*这个函数w3c就有，不多讲*/
}
<div class="backDiv">这个div渐变色</div>
2.设置字体渐变色（重点）
思路：1.把要设置渐变色的字体放入一个块元素内，如div、p
2.如上，把此元素背景设置为渐变色
3.把该块元素设置为“按文字裁剪”
4.把该文字设置为透
.test{
display: inline-block;
font-size: 26px;
background-image: linear-gradient(to right bottom, #ccc , #fff);
-webkit-background-clip: text;/*按字体裁剪*/
-webkit-text-fill-color: transparent;/*设置字体透明*/
}
<div class="test">渐变字体</div>
