css绘画虚线 竖的 横的

横着的

  &::after{
      content: '';
      position: absolute;
      left:60px;
      top: 50%;
      width: calc(100% - 60px);

    height: 4px;
    background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 4px,transparent 4px, transparent);
    background-size: 8px 100%;

      // background-image: linear-gradient(to right, red 0%, red 80%, transparent 50%);
      // background-size: 100% 18px;
      // background-repeat: repeat-x
    }

竖着的 css样式

.dashedBorder{
    // height: 10px;  注释的为横着的
    // background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 3px,transparent 3px, transparent);
    // background-size: 6px 100%;
    height: 2000px;
    width: 20px;
     background-image: linear-gradient(to bottom, red 0%, red 0%, 5px,transparent 5px, transparent);
      background-size: 100% 20px;
}

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试