如何实现一个自定义宽度和间距的虚线边框？

如上图所示

该边框每个元素的宽度为8px，高度为1px，间距为2px，radius为4px

要如何实现？
看到网上比较多的方案是 border-image 引入切片的图片来实现，有什么不需要引入图片纯代码的方法吗？

阅读 1.5k

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-border {
            position: relative;
            width: 200px;
            height: 100px;
        }

        .custom-border::before, .custom-border::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-top: 1px dashed black;
            border-bottom: 1px dashed black;
        }

        .custom-border::before {
            border-top-width: 4px;
            border-bottom-width: 4px;
        }

        .custom-border::after {
            border-top-width: 6px;
            border-bottom-width: 6px;
        }
    </style>
</head>
<body>
    <div class="custom-border"></div>
</body>
</html>

如何实现一个自定义宽度和间距的虚线边框？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？