css中的linear-gradient函数的用法

日常工作中用到了渐变色，但是仅限于了解实现简单的效果，所以趁着有空好好学习一番。

定义

MDN的解释：

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

linear-gradient其实就是相当于background-image，它创建的是背景图片而非背景色。

渐变角度

渐变角度是与渐变容器中心点的垂线形成的角度。

渐变线

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）

如下图：

点C为渐变容器的中心点，角度A是与过C点的垂线形成的角度，穿过中心点形成渐变角的这条线就叫做渐变角度。

渐变线和渐变角度相辅相成，它们之间可以根据彼此互相计算得到。

起始点

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

终点

终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

如下图：

语法

先看MDN：

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

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

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

<color-hint>
颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。

太多？看不懂？没关系：教你读懂MDN上的CSS语法

简单的总结一下语法：

值	描述
方向	定义渐变色的渐变方向（角度）,其值可选，默认值是180deg（to bottom）
渐变色	至少由两个颜色组成，每个颜色后面跟着可选参数，表示两个颜色之间渐变色的起点，如：linear-gradient(red 10%, blue 90%)，表示从起点到10%的距离为红色，10%-90%的距离为从红色渐变到蓝色，90%-终点为蓝色。每两个颜色中间还有一个可选参数，代表两个颜色转换的中点，默认50%，如10% - 90% 这段渐变距离的中点就是两个颜色的转换的中点

Demo

列举该函数所有可能性的用法：

1. 第一个参数不写,默认180deg，从上到下渐变

background: linear-gradient(red, blue);

// 等同于：

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

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

Demo传送门

2. 带第一个参数，45度渐变

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

Demo传送门

3. 渐变色后跟可选参数，表示渐变的距离

background: linear-gradient(red 20%, blue 80%);

Demo传送门

4. 每两个渐变色之间跟可选参数，表示两个颜色间渐变的中心点

background: linear-gradient(red 20%, 60%, blue 80%);

Demo传送门

再解释一下，渐变中心：从上到下，20%到80%为容器的渐变距离，然后如果不设置渐变中心，默认50%，也就是说20%到80%之间距离的中心也就是两个颜色正式改变的位置，如上，我设置了渐变中心为60%的位置，也就是说红色渐变的距离长，颜色改变的慢。

以上。笔者水平有限，若有错误敬请指正，不明白的地方也可评论区留言交流~

参考资料：

你真的理解CSS的linear-gradient？

MDN—CSS linear-gradient()函数