如何用纯css控制边框虚线的长度或者间隔

入职新单位啦~一直没时间写东西;这几天开发新页面,ui给的图上的虚线是css的dash线不能实现的

css 上的效果是这样的

而设计图上是这样子的

经过查了一会儿发现可以用神奇的css背景颜色渐变来处理

div {
    border: 1px solid transparent;
    background: linear-gradient(white,white) padding-box,
    repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.5em,white 0,white 0.75em);
}

下面是效果