CSS 的 linear-gradient() 线性渐变函数（带例子）

一、CSS中的 linear-gradient() 函数：

1、定义与用法：（定义部分取自菜鸟教程）
linear-gradient() 函数用于创建一个线性渐变的" 图像 "。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的度过，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

2、实例：以下实例演示了线性渐变：

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

3、支持版本：CSS3

4、语法：background-image：linear(direction，color-stop1，color-stop2，…)

< linear-ragient> = linear-ragient( [ [ <angle> | to <side-or-corner ]，]? <color-stop>[ ，<color-stop>]+ )

二、参数说明：

它实际上不是颜色，而是背景图片。也就是说，它并不是color的属性值，而是background的属性值。接下来我们看一下linear-gradient()函数的具体用法：

1、direction：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于：270deg
to right：设置渐变从左到右。相当于：90deg
to top：设置渐变从下到上。相当于：0deg
to bottom：设置渐变从上到下。相当于180deg，这是默认值，等同于留空不写。

2、color-stop：用于指定渐变的起止颜色：
color：指定颜色。
length：用长度值指定起止色位置。不允许负值
percentage：用百分比指定起止色位置。

三、举例说明参数：
1、传入两个或多个颜色参数：
这个很好理解，要做渐变，当然得设置颜色值，而且如果不传入两个以上颜色的话也没法做到颜色的渐变。

background:linear-gradient(red,yellow);
background:linear-gradient(red,yellow,green);

比如：我们分别传入红黄 和 红黄绿，默认是从上往下渐变的，效果如下：（这个很好理解，就不多说了）

2、传入渐变方向参数：
我们上面都是使用默认的从上向下渐变，接下来我们来设置各个方向上的渐变，那么此时我们可以在传入颜色值的基础上再添加上渐变方向，该参数作为第一个参数，可以是八种方向，也可以是具体的角度值。

background:linear-gradient(to right,red,yellow);
background:linear-gradient(to right,red,yellow,green);

根据第一个参数的to right 我们就可以知道我们设置的是从左到右渐变，效果如下所示：

如果想要实现从左下角往右上角渐变，那么第一个参数可以写成 to right top 或者直接写出具体的角度（45deg）即可。

background:linear-gradient(to right top,red,yellow);
background:linear-gradient(to right top,red,yellow,green);

或者：（使用具体的角度）

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

见效果：

注意：角度表示的是从0deg开始顺时针转动的角度，如果为90deg，这表示顺时针转动90度，也就和to tottom一样的效果。

3、传入渐变颜色起止位置参数：
默认情况下起止位置为0 ~ 100%，也就是说 默认情况下 可以写成如下这样：（效果和第一个例子相同）

background:linear-gradient(red 0,yellow 100%);

注意：位置参数 写在 色值之后，中间用空格隔开。
如果我们想设置成三种颜色我们也可以根据我们自己的需求自定义设置：（下面我们设置的是从0~70%为红到黄过渡其余30%为黄到绿过渡）

background:linear-gradient(red 0%,yellow 50%,green 100%);//和默认情况相同，0~50%红到黄，50%~100%黄到绿
background:linear-gradient(red 0%,yellow 70%,green 100%);

当然，我们也可以通过写成具体值的形式来设置，如果元素的高度为150px，那么我们可以写成这样：

background:linear-gradient(red 0,yellow 75px,green 150px);

见效果：因为默认情况下为 从上到下，所以我们 根据高 来作为依据，如果高为150px，那么我们设置从0 ~ 75px为 由红到黄色渐变，从75px ~ 150px 由黄色到绿色渐变。也就相当于 0 ~ 50% 由红到黄 50% ~ 100% 由黄到绿，效果一样。

我们再试一下其它的数值看一下效果：（假设高还是150px）

background:linear-gradient(red 0,yellow 125px,green 150px);

下面是从0 ~ 125px（相当于0 ~ 75% ）是由红到黄，125px ~ 150px（75% ~ 100%）设置为由黄到绿。

四、综合例子：

1、代码：

background: linear-gradient(45deg,red 0%,red 33.33%,yellow 33.33%,yellow 66.66%,green 66.66%,green 100%);

2、效果：

3、解释：

上面我们有一点没有解释到，通过这个顺便来解释一下：

• 上面的参数中45deg：表示顺时针旋转45度，代表的渐变方向，即从左下角向右上角渐变
• red 0%，red 33.33%表示从0% ~ 33.33% 从红色渐变到红色，也就是不渐变，所以一直为红色（所以会出现纯红色小块）
• yellow 33.33%，yellow 66.66%表示从33.33% ~ 66.66% 从黄色 渐变到 黄色（纯黄色小块）
• green 66.66%，green 100% 表示从66.66% ~ 100% 从绿色 渐变到 绿色（纯绿色小块）

我们如果对这些参数不理解，看到上面的代码肯定会一头雾水，但是相信理解了上面的例子以后，不论遇到关于这个函数什么样的参数我们都可以看懂了。

4、补充： 点击了解关于rgb()函数

• 我们不仅可以通过颜色名称（red、yellow、green等）来设置 颜色 也可以通过 十六进制的方式 （#ff0、#f00、#00f等）或者是rgb()函数 和 rgba()函数等多种形式来设置颜色的属性。
• 为了防止有些浏览器不兼容这些函数，我们可以再设置一个background属性来防止这种情况发生，有这种习惯总是好的。

5、使用透明度：（transparent）

1、CSS3渐变也支持透明度（transparent），可用于创建减弱变淡效果。
2、为了添加透明度，我们使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。
3、下面的实例演示了从左开始的线性渐变，起点是完全透明，慢慢过渡到完全不透明的红色：

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

五、重复渐变：

1、repeating-linear-gradient()函数：
我们学会了线性渐变函数，那么这个函数对你来说就是小菜一碟了，这个函数主要是为了简化我们操作的，废话不多说，看下效果：

上面的斑马线效果，我们可以通过上面综合例子那样一点一点的写出来，显然那样会浪费很多的时间和代码量，那么我们可以通过repeating-linear-gradient()函数来轻松实现：（看代码：）

background: repeating-linear-gradient(red 0,red 10%,yellow 10%,yellow 20%);

2、解释：
关于渐变方向我们没设置，则默认为从上向下，我们设置了从0 ~ 10% 为 红到红，10% ~ 20% 为黄到黄，下面如果不设置这回自动平铺。

另外，由于linear-gradient() 本身也是背景图片，所以以上效果我们还可以使用背景图片平铺方式来实现：（和上面效果一样）

background: linear-gradient(red 0,yellow 50%,yellow 50%,yellow 100%);
background-size: 100% 20%;

可以再测试一下，如果我们加上：background-repeat: no-repeat;（禁止平铺）

background: linear-gradient(red 0,yellow 50%,yellow 50%,yellow 100%);
background-size: 100% 20%;
background-repeat: no-repeat;

就会出现其余部分为空白的白色：（左边是编辑模式，右边是效果图）

我其它的关于CSS的函数都有总结，而且例子很详细，如果感兴趣可以看一看，上面就是关于linear-gradient()线性渐变函数的相关内容，如果喜欢请留个赞支持一下，谢谢！

关于CSS的其它函数总结的链接分享给你们（省着你们找着麻烦）：https://blog.csdn.net/weixin_44296929/article/category/9468349