SOURCE

console 命令行工具 X clear

                    
>
console
  <div class="check-box"></div>
.check-box {
  width: 297px;
  height: 140px;
  display: flex;
  border: 2px solid red;
  justify-content: center;
  align-items: center;
  background: rgba(9, 22, 32, 0.6);
  border-width: 1px;
  border-style: solid;
  -o-border-image: linear-gradient(
      0deg,
      rgba(0, 174, 255, 0.2),
      rgba(0, 174, 255, 0.2),
      rgba(0, 174, 255, 0.2)
    )
    10 10;
  border-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(rgba(0, 174, 255, 0.2)),
      color-stop(rgba(0, 174, 255, 0.2)),
      to(rgba(0, 174, 255, 0.2))
    )
    10 10;
  border-image: linear-gradient(
      0deg,
      rgba(0, 174, 255, 0.2),
      rgba(0, 174, 255, 0.2),
      rgba(0, 174, 255, 0.2)
    )
    10 10;
  position: fixed;
  bottom: 25px;
  left: 1980px;
}
.check-box::before {
  position: absolute;
  left: 0px;
  top: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(22, 205, 192, 0)),
    color-stop(#03acde),
    to(rgba(22, 205, 192, 0))
  );
  background: linear-gradient(
    to right,
    rgba(22, 205, 192, 0),
    #03acde,
    rgba(22, 205, 192, 0)
  );
}
.check-box::after {
  position: absolute;
  left: 0px;
  bottom: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(22, 205, 192, 0)),
    color-stop(#03acde),
    to(rgba(22, 205, 192, 0))
  );
  background: linear-gradient(
    to right,
    rgba(22, 205, 192, 0),
    #03acde,
    rgba(22, 205, 192, 0)
  );
}