渐变

渐变，顾名思义，逐渐的变化，这里指的是颜色的变化。

先看一幅最简单的渐变图：

从上到下，颜色从最上面的的红色，到最下面的蓝色，中间都是颜色的渐变过程。

CSS样式非常简单：

background: linear-gradient(red, blue);

linear-gradient函数

实现渐变主要用到的就是渐变函数linear-gradient()，我们只需要了解它的用法就可以做出各种各样的渐变效果。

angle

从上面代码我们可以看出，渐变默认的方向是从上往下，如果你想改变方向，来个从左往右渐变，简单设置方向即可：

background: linear-gradient(to right, red, blue);

效果如下：

再任性一点，往右上方向渐变：

background: linear-gradient(to right top, red, blue);

效果如下：

这里都是沿着某个固定方向渐变，不仅如此，我们还可以定义具体的角度：

background: linear-gradient(0deg, red, blue);

效果如下：

可以看出：0度是从下往上，那可以猜测出to right和90deg效果是一样的。

渐变方向是函数的第一个参数，可选，默认从上往下，也就是180deg。

linear-color-stop

对于渐变颜色，至少需要2个颜色值，更多也是可以的，例如：

background: linear-gradient(45deg, #3f87a6, #ebf8e1, #f69d3c);

效果如下：

color-hint

还有一个参数color-hint，它表示的是一个颜色的中转点。先看个例子：

background: linear-gradient(to right, red 10%, 30%, orange 65%);

这里数字百分比值就是color-hint，意思是前10%区域都是红色，65%到最后的区域都是蓝色，而中间10%~65%的区域是渐变区域，如果不设置color-hint值的话，那37.5%的位置应该是颜色的中转点，而这里设置的是30%，就相当于将中转点提前了，前面一部分颜色变化会更快。

一般来说，百分比是递增的，因为表达的都是同一块区域，但如果出现了递减，则后面的值会被覆盖。

例如：

background: linear-gradient(to right, red 40%, orange 30%, green 65%);

这里前40%的区域都是红色，会覆盖后面orange到green的区域。

思考

根据上面的介绍，我们如果实现一个简单的三基色条纹呢？

参考代码：

background: linear-gradient(to right, red 33%, green 33%, green 66%, blue 66%);