如何在 HTML 中制作边框上带有标题的框？

Question

如果有任何方法可以使用 HTML/CSS使一个盒子看起来像这里的盒子：

Answer 1

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

来自 MDN：

<字段集>

HTML<fieldset>元素用于对<label>Web 表单中的多个控件和标签 ( )进行分组。

<标签>

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

如前所述，创建表单时会使用fieldset和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;
}

上面的代码呈现这个：

演示