这篇文章是我根据MDN学习，有感而发，写的关于我的理解步骤，写的比较粗糙见谅
官网地址链接:linear-gradient() - CSS（层叠样式表） | MDN (mozilla.org)
学习一个函数，首先看看它的语法是什么
/*首先这一行为，该函数的模板*/
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
---------------------------------/ -------------------/
梯度线的定义 颜色停止列表
/*下面为该函数中值分别又是什么，其中的值为正则匹配，可以去查询一下正则匹配,注意不完全一致*/
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> ]
正则表达式 – 元字符 | 菜鸟教程 (runoob.com) 经过上面where的转换变成了如下正则，然后进行匹配
linear-gradient([ <angle> | to [ left | right ] || [ top | bottom ] ,]?
[ <color> [ [ <percentage> | <length> ]{1,2} ]? [, <percentage> | <length>? ]? ]#
, <color> [ [ <percentage> | <length> ]{1,2} ]? )
where <side-or-corner> = [ left | right ] || [ top | bottom ]
---------------/ --/ -------------/
这句话指的是<side-or-corner>的第一个值为left 或者right，第二个值不填
或者第一个值为空，第二个值为top或者bottom
注意：该值之前需要写to，默认为to bottom
其他由于是<>（代码）所以暂不分析。
| 值 | 默认 | 描述 |
|---|---|---|
<side-or-corner> | to bottom | 描述渐变线的起始点位置。它包含 to 和两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。关键词的先后顺序无影响，且都是可选的。 to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。 |
<angle> | 180deg | 用角度值指定渐变的方向（或角度）。角度顺时针增加。 |
<linear-color-stop> | 无（需填写<color>值） | 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。 |
<color-hint> | 颜色转换的中点是两个颜色停止之间的中点。 | 颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 |
看几个例子:
/*指的就是从下到上由红到绿以百分之五十为界限*/
background: linear-gradient(red, green);
/*0.25turn为旋转°，跟deg差不多，下面颜色则被等分为三份*/
background: linear-gradient(0.25turn, red, green, blue);
/*这句话的意思就是从右到左，百分之五十全为红色，从百分五十到百分之七十五为红变绿（渐变）百分之七十五之后为红色，其实这里的百分之七十五也可以写成0*/
background: linear-gradient(to left, red, red 50%, green 75%, red 75%);
/*这里渐变属性可以设置多个，仍旧是角度，从某以颜色到另外一颜色，但是注意这里会以第一层为主，由于颜色为透明的所以底层颜色可以显现出来*/
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%);
