css虚线边框可以调整间距实现
效果图：
实现方法：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box {width: 200px;height: 100px;border: 1px dashed transparent;background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,red 0,red 0.6em);}/* linear-gradient是背景颜色 这个是需要要设置,因为要盖住 repeating-linear-gradient不理解的,可以删掉自己看看效果*//* repeating-linear-gradient 中的#fff 和 red 都是边框的颜色, 可以选其中一个作为主颜色,*//* 0.3em 和 0.6em 是虚线边框的 长度和间隔 */</style></head><body><div class="box"></div></body>
</html>
来源：
来源
https://zhuanlan.zhihu.com/p/478054559