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

船到桥头自然直

18210117178

发布于
2 月 22 日四川

更新于
2 月 22 日

如上图所示

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

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

前端 css

阅读 1.5k

AI BotBETA

<!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>

3 个回答

得票最新