用CSS3属性background实现文本渐变色效果

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)，这里是由线性渐变实现的。

语法：

background:linear-gradient(diretion, color, another-color...)

• linear-gradient：线性渐变（渐变类型）
• diretion：渐变方向，值可以用角度的关键词，也可以用英文表示（如下图）
• color：颜色的起点，值可以是英文单词，也可以是十六进制。
• another-color...：颜色的终点，值可以是英文单词，也可以是十六进制。
  • 第一个参数省略时，默认为“180deg”，等同于“to bottom”。
  • 第二个和第三个参数，表示颜色的起点和终点，中间可以写入多个颜色值。

direction的值：

图片来自慕课网

字体实现渐变色效果

background-clip 属性规定背景的绘制区域。

代码示例：

    
从右到左的渐变色背景

效果图：

文本的渐变色.jpg