今天来谈谈CSS3中的线性渐变，有了这个，好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。
首先看看今天的主角： linear-gradient()。
它，实际上不是颜色，而是背景图片。也就是说，它并不是color的属性值，而是background的属性值。
我们接下来看看linear-gradient()的具体用法。
语法：
<linear-gradient> = linear-gradient([ [<angle> | to <side-or-corner> ] ,]? <color-stop>[，<color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color>[<length>|<percentage>]?
说明：
<angle>: 用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>： 指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
以上语法部分使用的是正则表达式的语法规则，可能并不是很好理解。
没关系，学习都是需要循序渐进的，我们从最简单的开始……
1. 传入两个或多个颜色参数
这个很好理解，要做渐变，当然得设置颜色值，换句话说，你得让浏览器知道你想要实现从哪个颜色到哪个颜色之间的渐变。例如，你要实现从红色到黄色之间的渐变，你可以这样写：
background: linear-gradient(#f00,#ff0);默认是从上往下渐变的，效果如下：
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。