CSS颜色渐变函数--linear-gradient()函数的语法和使用

linear-gradient()函数是CSS函数中用于创建一个线性颜色渐变图片的函数，可以创建至少包含2种颜色的线性渐变。linear-gradient()的结果是一种gradient数据类型，gradient是一种特别的image图片类型，是image数据类型的子集。

linear-gradient()函数的语法

background: linear-gradient([角度/方向],起始颜色[位置/长度],[中转点颜色[位置/长度]...]结束颜色[位置/长度]);

其中带[ ]的参数表示可选，也就是说，在整个linear-gradient()渐变函数中必填的只有起始颜色和终止颜色两个参数，其余的参数均可选。

1、设置渐变方向：

默认情况下，linear-gradient()函数的渐变方向为从上到下。如：

background: linear-gradient(red,yellow); // 从上至下，为红色到黄色的渐变

可以通过设置一个角度值为函数的第一个参数来指定渐变的方向。如：

background: linear-gradient(60deg,red,yellow);

当角度值为0时，方向为从下至上，当角度值为180度时，方向从下至上。角度值顺时针增加。

也可以使用to+方向关键词来指定方向，如：to left/right top/bottom，一般第一个关键词用于指定水平位置left或right，第二个关键词用于指出垂直位置top或bottom，但不是固定的，调整水平和垂直的关键词顺序，不会对渐变方向产生影响。方向关键词可以只指定一个（即结束位置），此时渐变线的起始点默认为与结束点对称的位置。如下：

// 只指定一个
background: linear-gradient(to top,red,yellow); // 从下至上，即0度
background: linear-gradient(to bottom,red,yellow); // 从上至下 180度
background: linear-gradient(to left,red,yellow); // 从右到左 270度
background: linear-gradient(to right,red,yellow); // 从左到右 90度
// 指定水平和垂直位置
background: linear-gradient(to top right,red,yellow); // 右上，等同于 to right top
background: linear-gradient(to right top,red,yellow); // 同上
background: linear-gradient(to bottom left,red,yellow); // 左下，等同于 to left bottom
background: linear-gradient(to left bottom,red,yellow); // 同上

2、设置渐变颜色

起始颜色和终止颜色以及中间的中转点都为渐变颜色。linear-gradient()函数的渐变颜色为一个颜色值，可选择跟一个表示位置的值（百分比或一个表示距离渐变轴起点的距离值）。如：

background: linear-gradient(red 30%, yellow 50%, blue 70%);
background: linear-gradient(red 20px, yellow 50px, blue 80px);

默认的，第一个颜色值如果不带表示位置的值，默认为0%，最后一个颜色值的位置默认为100%。

另外，渐变颜色还可使用rgba()函数使用带有透明度的颜色，以实现更多的渐变效果。