外描边偏移 outline-offset

效果演示

image.png
源码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>测试</title>
        <style>
            .box1 {
                width: 60%;
                height: 180px;
                background: #e0c89b;
                margin-inline: auto;
                margin-bottom: 50px;
                outline: 2px dashed blue;
                outline-offset: -10px;
            }

            .box2 {
                width: 60%;
                height: 180px;
                background: #9ee3d7;
                margin-inline: auto;
                outline: 2px dashed blue;
                outline-offset: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>