如何在 HTML 中制作一个边框带有标题的框？ [关闭]

如果有什么方法可以让一个盒子看起来像这个here https://i.stack.imgur.com/iKftB.jpg使用 HTML/CSS：

您可能正在寻找 HTMLfieldset and legend元素，适用于表单。

来自 MDN：

超文本标记语言<fieldset>元素用于将多个控件分组为 以及标签（<label>）在网络表单中。

HTML 标签元素 (<label>) 代表一个项目的标题 用户界面。

如前所述，fieldset and legend创建表单时使用元素。

如果您只想将标签框放在边框上，则可以使用绝对定位，如下所示：

HTML

<div id="container">
    <div id="label">I'm a Box</div>
</div>

CSS

#container {
    height: 100px;
    width: 300px;
    border: 1px solid black;
    position: relative;
}

#label {
    position: absolute;
    top: -10px;
    left: 20px;
    height: 20px;
    width: 100px;
    background-color: pink;
    border: 2px solid red;
    text-align: center;
}

上面的代码呈现这样的效果：

DEMO https://jsfiddle.net/pwp3ynsz/2/