怎么使用css写可视化常见的背景和元素

4个角的背景加背景颜色

.line-bg {
  --width: 2px;
  --height: 10px;
  --color: v-bind('colorConfig.visial.normal');
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(to bottom, var(--color) var(--width), transparent 1px),
    linear-gradient(to right, var(--color) var(--width), transparent 1px),
    linear-gradient(to bottom, var(--color) var(--width), transparent 1px),
    linear-gradient(to left, var(--color) var(--width), transparent 1px),
    linear-gradient(to top, var(--color) var(--width), transparent 1px),
    linear-gradient(to right, var(--color) var(--width), transparent 1px),
    linear-gradient(to left, var(--color) var(--width), transparent 1px),
    linear-gradient(to top, var(--color) var(--width), transparent 1px);
  background-size: var(--height) var(--width), var(--width) var(--height),
    var(--height) var(--width), var(--width) var(--height), var(--height) var(--width),
    var(--width) var(--height), var(--width) var(--height), var(--height) var(--width);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

解析：

background-image、background-size、 background-position属性都可以多个，使用线性渐变画出一条线，用background-size控制大小，background-position控制位置就可以写出4个角的效果了

连续的箭头

解析：这种连续的箭头需要用4个伪元素去写

&-left {
    height: 12px;
    position: relative;
    &::before {
      top: 0;
    }
    &::after {
      top: 50%;
      transform: rotateX(180deg);
    }
  }
  &-left::before,
  &-left::after {
    content: '';
    position: absolute;

    left: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(
      45deg,
      transparent 0,
      transparent 9%,
      #3c7eff1a 0,
      #3c7eff1a 15%,
      transparent 0,
      transparent 27%,
      #3c7eff4d 0,
      #3c7eff4d 33%,
      transparent 0,
      transparent 45%,
      #3c7eff99 0,
      #3c7eff99 52%,
      transparent 0,
      transparent 64%,
      #3c7effe6 0,
      #3c7effe6 70%,
      transparent 0,
      transparent 82%,
      #3c7eff 0,
      #3c7eff 87%,
      transparent 0
    );
  }

  &-right {
    height: 12px;
    transform: rotateZ(180deg);
    position: relative;
    &::before {
      top: 0;
    }
    &::after {
      top: 50%;
      transform: rotateX(180deg);
    }
  }
  &-right::before,
  &-right::after {
    content: '';
    position: absolute;

    left: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(
      45deg,
      transparent 0,
      transparent 9%,
      #3c7eff1a 0,
      #3c7eff1a 15%,
      transparent 0,
      transparent 27%,
      #3c7eff4d 0,
      #3c7eff4d 33%,
      transparent 0,
      transparent 45%,
      #3c7eff99 0,
      #3c7eff99 52%,
      transparent 0,
      transparent 64%,
      #3c7effe6 0,
      #3c7effe6 70%,
      transparent 0,
      transparent 82%,
      #3c7eff 0,
      #3c7eff 87%,
      transparent 0
    );
  }