HTML如何获得图像的完整底部边框，我可以将文本放入其中

Question

我是HTML和编码的菜鸟，所以这可能看起来很糟糕，抱歉。我想在我的照片下面有一个厚边框，我的文字会在边框上，有点像这样：

这就是我所拥有的，我设法将文字放在边框内，但我无法让它做我想要的......

.img {
  width: 420px; 
  border-radius: 5px; 
  border-width: 5px;
  border-style: solid;
  border-color: blue;
  margin: auto;
}

<div class="img">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" style="width: 420px;">
  <p style="text-align: center"> Picture of a deer </p>
</div>

我在这个网站上搜索了很多，我看了一些关于边界的指南，但我没有找到如何解决这个特殊问题。也许有一个确切的术语可以帮助我找到更好的结果，如果是这样的话，我很抱歉。

Answer 1

只需添加背景：

＆＃13;

＆＃13;

.img {
  width: 420px; 
  border-radius: 5px; 
  border-width: 5px;
  border-style: solid;
  border-color: blue;
  margin: auto;
  background:blue;
}

＆＃13;

<div class="img margin">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" style="width: 420px;">
  <p style="text-align: center"> Picture of a deer </p>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您想使用边框，请将底部更大，并在文本上使用负边距，使其超出边框：

＆＃13;

＆＃13;

.img {
  width: 420px; 
  border-radius: 5px; 
  border-width: 5px;
  border-bottom-width:50px;
  border-style: solid;
  border-color: blue;
  margin: auto;
}
p {
 margin-bottom:-40px;
}

＆＃13;

<div class="img margin">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/White-tailed_deer.jpg" style="width: 420px;">
  <p style="text-align: center"> Picture of a deer </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能正在寻找数字标签。

figure {
  background-color: #eee;
  border: 1px solid #aaa;
  display: table-cell;
  padding: 2px;
  text-align: center;
}

<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
  <figcaption>MDN Logo</figcaption>
</figure>