直接上代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>p{font-size: 60px;background-image: linear-gradient(135deg,red,blue);background-clip:text;-webkit-background-clip:text;color: transparent;}</style></head><body><p>我是渐变文字</p></body></html>
效果如图：
核心内容说明：
background-image属性：设置背景图片为线性渐变色，了解更多css3渐变内容点击这里
background-clip 属性：规定背景的绘制区域。(我们注意到该属性上的-webkit-，说明该属性还存在兼容问题，并不是所有浏览器都支持，在W3C是没有text这个值的，这里的text是背景被裁剪到文字)
color属性: 设置文字颜色为透明，然后面的背景色显示出来。
