我们一看到虚线，通常想到的都是通过border的dotted或dashed。

.border-dotted {
  border: 1px dotted
}
.border-dashed {
  border: 1px dashed
}

但border展现的效果往往不是我们想要的，也没法控制线条的长度和间隔。如果要实现自定义的虚线效果可以考虑使用linear-gradient()函数，如下：

.border-linear1 {
  background-image: linear-gradient(to right, #b1bcc8 80%, rgba(255, 255, 255, 0) 0%); /* 80%代表在x方向20px暂居的比例 */
  background-size: 20px 2px; /* 第一位代表线条宽度 第二位代表线条高度 */
  background-repeat: repeat-x; /* 横向虚线只在x上repeat，不然就会出现条形码样的线条*/
  background-position: top; /* 线条位置top或bottom，如果使用right或left则或上下居中 */
}
.border-linear2 {
  background-image: linear-gradient(#b1bcc8 50%, rgba(255, 255, 255, 0) 0%); 
  background-size: 1px 10px; 
  background-repeat: repeat-y;
  background-position: left;
}

现在我们就能得到各个方向上的虚线，如果要实现整个边框都是虚线的话就要使用repeating-libear-gradient函数了 在官方示例我们可以看到如果将斜向条纹中间部分抠除，只留下border就可以得到虚线的边框

在示例上添加以下代码，就可以实现虚线边框

.border {
  height: 100px;
  border: 1px solid transparent; /* 添加border */
  background: 
    linear-gradient(#fff, #fff) padding-box, /* 单色覆盖padding-box以内区域 只留下border*/
    repeating-linear-gradient(-45deg,
      #b1bcc8,
      #b1bcc8 10px,
      rgba(255,255,255,1) 10px,
      rgba(255,255,255,1) 20px); /* 重复颜色部分*/
}