2. 线性渐变

线性渐变

线性渐变 沿着某条直线朝一个方向产生渐变效果

语法: background: linear-gradient(direction, color-stop1, color-stop2, …);

direction: 方向 可以是 角度(10deg)顺时针 也可以是 to top/left/right/bottom

eg: background: linear-gradient(to right ,red 60%,orange 80%);

颜色后面可以跟百分比,表示从百分几开始渐变

重复渐变: background: repeating-linear-gradient(to right,red 0, red 10%, purple 10%, purple 20%)

可简写为: background: repeating-linear-gradient(to right,red 0 10%, purple 10% 20%)

一般是通过ui设计稿 直接提取的渐变 角度 颜色比重

.box{
      width: 200px;
      height: 200px;
      /* background-color: green; */
      margin: 50px 100px;
      /* background: linear-gradient(to right, red 50% , green 80%); */
      background: linear-gradient(to right, red, green,yellow,pink );
    }
.box2{
      width: 200px;
      height: 200px;
      margin: 50px 100px;
      /* 方向 可以是 角度(10deg)顺时针 也可以是 to top/left/right/bottom */
      background: repeating-linear-gradient(-45deg, #fff 0 ,#fff 10%,blue 10%, blue 20%);
    }

<div class="box"></div>
<div class="box2"></div>