有趣的线性渐变

linear-gradient()为 CSS 函数，用于创建一个表示两种或多种颜色线性渐变的图片；
其结果属于 gradient 数据类型，是一种特别的 image 子数据类型；
线性渐变由一个轴 (梯度线也叫做渐变线) 定义，且轴上有两个或多个独立的颜色点组成，每两个色点之间会有一个过渡点(自己起的名字，目前还没有找到相关的文档证实)，该点决定了两个色点之间的颜色过渡比例，默认在两个色点中间的位置，该值的设置相对于渐变线而不是色点；
在渐变线两端的色点为起始点和终点，并且这两个点是必须的；
为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。
渐变线：一条有角度(Y轴的负方向为0deg，顺时针旋转，逆时针为负值)的经过容器中心点的有向直线；
起始点：绘制时颜色的开始位置，即为渐变线坐标0的位置；
终点：绘制时颜色的结束位置，即为渐变线坐标100%的位置。

语法介绍

查了很多资料给出的语法也是有点差异，MDN 上的中英文给出的也是不同，个人感觉英文的还是更加权威，可能是英文新更新了文档，中文还没来得及更新。

看一下比较权威的 MDN 上给出的语法规则：

摘自于: 2019-12-05
# 英文给出的规则
linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

# 中文给出的规则
linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [left | right] || [top | bottom]
and   <color-stop>     = <color> [ <percentage> | <length> ]?

side-or-corner (方位值) 如果指定，它由单词 to 和至多两个关键字组成: 一个表示水平方向(left、right)，另一个表示垂直方向(top、bottom)；这个两个关键字没有顺序限制；如果未指定默认为：to bottom。
to top 、 to bottom 、 to left 和 to right 分别对应于：0deg 、 180deg 、 270deg 和 90deg。

angle (角度) 代表渐变线旋转的方向角，Y 轴的负方向代表 0deg 的方向，等同于 to top，按照顺时针方向增加，逆时针为负值减小。

linear-color-stop (线性颜色终止) 该值由一个颜色值，后面跟随0、1或2个终止位置的值组成(可以是梯度轴的百分比或者是长度值)。
已起始点为基准点。

color-hint (渐变点) 该值描述了两个相连颜色之间如何进行渐变的，即两个颜色应该在什么位置进行中转，如果忽略该值，则在两个颜色中间的位置。

例子

01 简单例子

最简单的例子，只有两个颜色值，见例 01-1；
第一个值默认为to bottom即 180deg；
第一个颜色值的终止点默认为 0%即和渐变线的起始点重合；
最后一个颜色的终止点默认为 100%即和渐变的终点重合；
两个相邻颜色之间的渐变点默认为 50%。

02 渐变点

通过改变渐变点来改变线性渐变的颜色渐变的中转位置，即颜色过渡的比例。

03 任意方向渐变

to 加关键字，角度和负角度。

04 多个颜色

如果颜色点后忽略了终止位置，则会平分从起始点到终点的渐变线。

05 超出渐变线的起始点和终点

之前在一篇博客中看到说到颜色后面跟随的终止位置不可以为负值，或许说的有点错误，见例 05-2；
在渐变图像的渲染，均是以渐变线的起始点开始，到渐变线的终点结束；
如果超出了渐变线的起始点或终点则会忽略超出部分的渲染。

06 颜色点后跟随两个终止位置

跟随两个终止位置时相当于对两个相邻且相同颜色的合并写法，见例 06-2 和 06-3

07 实现颜色的硬过渡

不断的拉近两个相邻颜色的终止位置时，渐变效果越生硬；
拉到同一个位置时直接就是硬过渡。