创建一个CSS线性渐变：
HTML元素的背景色不局限于单色，CSS还提供了颜色过渡，也就是渐变。可以通过background里的linear-gradient()来实现线性渐变。语法如下：

background:linear-gradient(gradient_direction,颜色1,颜色2,......)

第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序；例子如下：

background:linear-gradient(90deg,yellow,red,rgb(255,255,255));

注：有很多种方式指定颜色值，如rgb()或者hsl() gradient_direction:梯度方向 linear-gradient:线性梯度

使用 CSS 线性渐变创建条纹元素：
repeating-linear-gradient()函数和linear-gradient()很像，主要区别是repeating-linear-gradient()重复指定的渐变。
角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。代码如下：

background:repeating-linear-gradient(
  90deg,
  yellow 0px,
  blue 40px,
  green 40px,
  red 80px
);

渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的blue。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值green，然后过渡到距离开始位置 80 像素的red。
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。例如：

background:repeat-linear-gradient(
  45deg,
  yellow 0px,
  yellow 40px,
  black 40px,
  black 80px
)