渐变横线 竖线

html

<template>
  <div class="login">
    <div class="boxs">
      <div class="boxx"></div>
      <div class="child">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="box"></div>
      <div class="child">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="box"></div>
      <div class="child">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

css

.boxs {
  width: 600px;
  height: 300px;
  border: 1px solid #ccc;
}
.child {
  width: 50px;
  height: 100px;
}

/*
竖线
*/
.box {
  width: 100%;
  height: 1px;
  background: -webkit-linear-gradient(left, rgb(94, 38, 38) -4%, #195B9C 50%, rgb(46, 214, 136) 100%);
}

/*
横线
*/
.boxx {
  position: absolute;
  left: 300px;
  width: 1px;
  height: 296px;
  background: linear-gradient(
    244deg,
    rgba(25, 91, 156, 0.00) 0%,
    #195B9C 48%,
    rgba(25, 91, 156, 0.04) 100%
  );
}

效果如图：

渐变色的属性是background-imgas用背景属性实现：

所用的属性值是linear-gradient()或repeating-linear-gradient()

linear-gradient(to 渐变的方向up(从上至下)/bottom(从下至上) 第一个颜色，第二个颜色，···(可放多个颜色))

以下是创建一个条纹背景

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
/* 
第一个属性是角度45度，第二个是在0px的时候是黄色，第三个是40px也是黄色，
合在一起是从0px到40px是黄色，后面的就好理解了，从40px到80px是黑色 
*/
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }

效果如下：

径向渐变：

background-image: radial-gradient(颜色, 颜色); 
/* 默认圆心为div中心，默认形状为椭圆 */
background-image: radial-gradient(形状, 颜色, 颜色); 
/* circle表示圆形，ellipse表示椭圆 */
background-image: radial-gradient(at x y, 颜色, 颜色);
 /* x和y是圆心的x和y */
background-image: radial-gradient(形状 at x y, 颜色, 颜色); 
/* x和y是圆心的x和y */
background-image: radial-gradient(大小 形状 at x y, 颜色, 颜色); 
/* 大小用几个关键字表示 */
/*
    最近的边作为大小：closest-side
    最近的角：closest-corner
    最远的边：farthest-side
    最远的角：farthest-corner
*/
background-image: repeating-radial-gradient(颜色 百分比, 颜色 百分比); 
/* 默认圆心为div中心，默认形状为椭圆 */

当然我们一般不用background属性来设置都是background-imgas来设置，因为可能会出现跟你后面设置的背景其他的的属性值出现冲突。