CSS 属性篇(九)：linear-gradient()介绍与使用

一、基本介绍

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
复制代码

1.1 语法：

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

<angle>
  用角度值指定渐变的方向（或角度）。角度顺时针增加。

<side-or-corner>
  描述渐变线的起始点位置。
  它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。
  关键词的先后顺序无影响，且都是可选的。
  to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。
  其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。
  渐变线的结束点与其起点中心对称。

<color-stop>
  由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。
复制代码

二、渐变角度

2.1 渐变角度定义

linear-gradient是通过渐变的角度来控制渐变的方向。渐变角度值是