---

前言

本文主要介绍linear-gradient的使用方法，既有普通的用法，也有高级用法，主要实现的功能有渐变、条纹、斜向条纹、网格、模拟虚线、progress进度条动画。看完本篇文章，相信你一定会有所收获
本文主要参考书籍【CSS揭秘】

---

普通渐变

-最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果
background: linear-gradient(to right, #30e8bf, #ff8235);

条纹

调整色标位置，实现两个非渐变效果
background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%);
参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过渡位置一样，则不会出现平滑渐变效果，而是突然变化

条纹重复

渐变背景除了铺满整个背景，还可以手动调整渐变尺寸, 通过设置background-size: 100% 50px，设置宽度方向100%铺满，竖向50px，此时单个背景色高度是25px，默认情况下是重复平铺整个背景，效果如下，

background: linear-gradient(to bottom, #30e8bf 50%, #ff8235 50%);
background-size: 100% 50px;

这里还有个缩写小技巧，如果后一个色标位置小于前一个色标的位置，则后一个色标位置会被它前面色标位置最大值替代，如上线三个不同颜色的条纹可以缩写成这样

      background: linear-gradient(
        to bottom,
        #30e8bf 33.3%,
        /* 这里的0，是缩写，相当于33.3% */
        #2a6b7e 0,
        #2a6b7e 66.6%,
        /* 这里的0，是缩写，相当于66.6% */
        #ff8235 0
      );
      background-size: 100% 50px;

虚线

搭配使用transparent可以实现虚线效果，在写法上有两种

      height: 1px;
      /* repeating写法和下面带background-size效果是一样的 */
      /* background-image: repeating-linear-gradient(
        to right,
        gray,
        gray 10px,
        transparent 0,
        transparent 20px
      ); */
      background-image: linear-gradient(
        to right,
        gray,
        gray 10px,
        transparent 0
      );
      background-size: 20px 100%;

额外提一句：实现虚线还可以使用svg，关键词：stroke-dasharray

斜向条纹

linear-gradient的第一参数可以设置方向，除了水平垂直外，还可以设置角度。现在尝试将其设置为45deg

      background: linear-gradient(45deg, #30e8bf 50%, #ff8235 50%);
      background-size: 50px 50px;

发现这些格子没有无缝衔接，这时候可以利用css的另一个函数repeating-linear-gradient，这个函数会无限重复色标，所以色标位置应该填写具体数值，而且不需要设置background-size，如下图

      background: repeating-linear-gradient(
        45deg,
        #30e8bf 0,
        #30e8bf 25px,
        #ff8235 0,
        #ff8235 50px
      );

三角形

在创建斜向条纹时，无意中发现了三角形，现在我们尝试将另一颜色设置为透明，就能完美的实现了一个三角形啦

      height: 30px;
      width: 30px;
      background-image: linear-gradient(45deg, gray 50%, transparent 0);

进度条动画 progress

斜向条纹搭配ainimation， 动态改变background-position-x可以实现进度条动画

    .div10 {
      height: 20px;
      background: repeating-linear-gradient(
        45deg,
        #30e8bf 25%,
        #ff8235 0,
        #ff8235 50%,
        #30e8bf 0,
        #30e8bf 75%,
        #ff8235 0
      );
      background-size: 30px 30px;
      animation: roll 1s linear infinite;
    }
    @keyframes roll {
      from {
        background-position-x: 0;
      }
      to {
        background-position-x: 30px;
      }
    }

网格

linear-gradient可以通过逗号，叠写多层渐变，横向网格+竖向网格叠加可以实现网格效果

      background-color: teal;
      background-image: linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
      background-size: 30px 30px;

多个linear-gradient叠加，再组合多个background-size还可以实现下图中效果

      background-color: teal;
      background-image: linear-gradient(white 2px, transparent 0),
        linear-gradient(90deg, white 2px, transparent 0),
        linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);
      background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

通过颜色透明度的叠加，可以实现类似桌布的效果

      background-color: white;
      background-image: linear-gradient(
          90deg,
          rgba(255, 0, 0, 0.5) 50%,
          transparent 0
        ),
        linear-gradient(rgba(255, 0, 0, 0.5) 50%, transparent 0);
      background-size: 30px 30px;

圆点阵列

通过径向渐变radial-gradient可实现圆点，重复平铺就能形成圆点阵列
首先回顾下radial-gradient参数

background-image: radial-gradient(shape size at position, start-color, …, last-color);

值	描述
shape	确定圆的类型， 可取椭圆ellipse，圆形circle
size	定义渐变的大小
position	定义渐变的位置，可取center（默认）、top、bottom
start-color, …, last-color	用于指定渐变的起止颜色

      background-color: #f2f2f2;
      background-image: radial-gradient(gray 20%, transparent 0);
      background-size: 30px 30px;

波点图案

两层径向渐变，通过设置background-position将第二层背景偏移量设置为第一层的一半，可以实现波点图案