CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)，这里是由线性渐变实现的。
语法：
background:linear-gradient(diretion, color, another-color...)
-
linear-gradient：线性渐变（渐变类型） -
diretion：渐变方向，值可以用角度的关键词，也可以用英文表示（如下图） -
color：颜色的起点，值可以是英文单词，也可以是十六进制。 -
another-color...：颜色的终点，值可以是英文单词，也可以是十六进制。- 第一个参数省略时，默认为“180deg”，等同于“to bottom”。
- 第二个和第三个参数，表示颜色的起点和终点，中间可以写入多个颜色值。
direction的值：
图片来自慕课网
字体实现渐变色效果
background-clip 属性规定背景的绘制区域。
代码示例：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
div {
background-image: linear-gradient(to left,red,orange,yellow,green);
-webkit-background-clip: text;
color: transparent;
font-weight: 700;
font-size: 16px;
line-height: 25px;
display: inline-block;
/* max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; */
}
</style>
<body>
<div>从右到左的渐变色背景</div>
</body>
</html>
效果图：
文本的渐变色.jpg
