Html 如何在div外创建边框，如图所示

我正在尝试创建如图所示的区域周围的边框，但不确定如何将其移出主框几个像素。 这是我试过的，但不是我想要的

HTML:

<section class="section-steps row outside" id="cities">

<div class="row">
    <h2>Our Values</h2>
</div>
<div class="row js--wp-1 our-values-image-container">
    <div class="col span-1-of-3 box">
        <h3 class="font-weight-bold">Animal Welfare</h3>
        <div class="img-background">
            <img src="resources/img/animal_welfare.jpg" alt="Animal Welfare">
        </div>
    </div>
    <div class="col span-1-of-3 box">
    <h3 class="font-weight-bold">Food Safety</h3>
        <div class="img-background">
            <img src="resources/img/food_safety.jpg" alt="Food Safety">
        </div>
    </div>
    <div class="col span-1-of-3 box">
        <h3 class="font-weight-bold">Sustainability</h3>
        <div class="img-background">
            <img src="resources/img/Sustainability-S.JPG" alt="Sustainability">
        </div>

    </div>

</div>

</section>

.img-background{
    background: #ffd203
}
.our-values-image-container{
    padding: 0px 40px;
}

以下是输出：

[！[在此处输入图像描述][1][1]

---

[！[enter image description here][2][2]

在这里您应该使用一些CSS属性：

如果文本从

或容器中传出，该属性可能会对您有所帮助

我知道您可能想要创建一个形状作为图像的背景，因此属性将帮助您

导入图像后，如果要在图像上写入，溢出属性在此处变得非常重要

现在，使用

位置：绝对使图像位于形状上方。这将帮助您：

---

我建议您在使用CSS时使用类和ID。

只需在图像中添加框阴影即可

*{
边际：0px；
填充：0px；
}
身体{
显示器：flex；
证明内容：中心；
高度：100vh；
对齐项目：居中；
}
img{
宽度：500px；
盒影：-30px-30px 0px黄色；
}