前言

写这篇博文的原因是因为两个方面

1、 网上很多对于linear-gradient()的介绍实在是太简短了， 简短到如果你遇到问题，不能从中获取任何有用信息 这篇文章不错

2、 这个东西在很多地方很好用啊！

正文

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

linear-gradient属于gradient数据类型， gradient是image的子数据类型， 因此gradient仅可以用于image类型可以使用的地方。(有点拗口哈， 在本文你可以理解为 linear-gradient在含imgae的标签下能用，其它都不行)。

demo1

  background-image: linear-gradient(to right,red, orange, yellow, green, blue);
复制代码

当然我们可以给颜色设置一个属性 叫做 color-stop,即颜色停止的位置。

demo2

 background-image: linear-gradient(to right,red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
  // 此段代码的效果和 上述代码效果等同。
复制代码

demo3

为了方便演示以及展现出效果的不同， 我们用两种颜色

demo3

// 原始代码
background-image: linear-gradient(to right, red, yellow);
// 效果等于
 background-image: linear-gradient(to right, red 0, yellow 100%);
复制代码

效果展示

现在我们对下一行的百分比做一下调试

            background-image: linear-gradient(to right, red 50%, yellow);
复制代码

我们肯一看到绿框圈起来的部分是红色，也就是百分之50%， 然后在50 % - 100%之间产生了 红色到黄色的渐变。（果然，渐变的效果是有点难以说清）。 至于为什么会这样 ， 请听我接下来的描述：

渐变的计算规则

首先，线性渐变是通过轴线定义的，我们在使用linear-graddient时使用的方向to right就定义了轴线的方向，从左向右。 在MDN的web文档里面时做如下描述

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出

平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线

上的色点

渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以

及两者之间的可选的中间点（中间点可以有多个）。

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

一象限内）

同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从

起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。
复制代码

放到demo3 当中就是大家可以想象，从左到右有一条水平的不能再水平的直线， 还有n多垂直于这条直线的直线， 这些直线密密麻麻的排列形成了所看到的长方形渐变区域。那么这些线的颜色是怎么定义出来呢？ 在我看来是这么个算法

起始点色值 + 终点色值 / 2 
复制代码

在两个颜色之间， 比如上文提到的红色和黄色，通过0点和100%点的色值，计算出中间50%位置的色值， 然后再通过0% 50%， 50% 100%计算出25%，75%的色值，以此类推。 多个颜色的话就分别以相邻两个颜色的终点来计算两者之间的渐变色

我是这么理解的， 如果有觉得不妥的，欢迎指正， 我接受哈

当然我们可以去指定颜色的中间点位置

            background-image: linear-gradient(to right, red 0%, 30%, yellow 100%);

复制代码

这样 过渡的中间值就移动到了30%

linear-gradient的用处

碎碎叨叨大概是说明了一些关于linear-gradient的东西， 我们接下来来看一下它的用处

上代码啊上代码 demo4

        .mode {
            width: 100px;
            height: 100px;

            margin: 50px auto;

            background-color: yellowgreen;

            background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);
        }
复制代码

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。
复制代码

就是说 我在rgba(255, 255, 255, .3) 25% 和 transparent 25%的时候 设置了终点值为25%，那么在这个位置就会出现 transparent的值， 如果有多个颜色具有同一个终点， 那在这个分割位置上，就是最后一个具有相同终点的颜色的色值。

想知道这个可以用来干什么吗？， 我们把demo4改一下 更改宽高， 设置size

 width: 200px;
            height: 20px;

            margin: 50px auto;

            background-color: yellowgreen;

            background-image: linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,  transparent 75%, transparent 100%);

            background-size: 20px 20px;
复制代码

并且linear-gradient可以设置多个， 比如我们来做一个铜钱

demo5

width: 100px;
height: 100px;
    
border-radius: 50%;

background-color: #fff;

background-image: linear-gradient(to right, yellow 25%, transparent 25%, transparent 75%,  yellow 75%),
                  linear-gradient(to top, yellow 25%, transparent 25%, transparent 75%,  yellow 75%);

复制代码

结语

linear-gradient你了解了之后 想要怎么骚操作就看你自己咯， 发挥你的想象力吧！