CSS自定义虚线边框及其原理

记录一个简单的自定义虚线边框：

发现dashed或者dotted边框太过简单不能符合Ui设计的图纸，通过背景渐变色实现一个自定义渐变边框

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

效果如下:

repeating-linear-gradient是控制边框粗细的属性