如何在 div 之外创建边框，如图像中所示答案

【问题标题】：How can i create a border outside a div like showed in image如何在 div 之外创建边框，如图像中所示
【发布时间】：2021-05-26 00:33:17
【问题描述】：

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

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>

CSS：

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

这是输出：

[![在此处输入图片描述][1]][1]

[![在此处输入图片描述][2]][2]

【问题讨论】：

标签： html css flexbox css-selectors

【解决方案1】：

只需给图像添加盒子阴影

* {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

img {
  width: 500px;
  box-shadow: -30px -30px 0px yellow;
}

&lt;img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"&gt;

【讨论】：

【解决方案2】：

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

overflow 属性可以在文本从 <div> 或容器中输出时为您提供帮助。
我知道您可能想为您的图像创建一个形状作为背景，所以shape 属性会为您提供帮助。

导入图片后，如果要在图片上写字，overflow 属性就变得很重要了。

现在，使用position: absolute; 让您的图像位于形状之上。这将对您有所帮助：Position

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

【讨论】：