TIP
引用 Preethi 的文章，原文地址：How To Add Text Inside A Border With Basic HTML And CSS
一些 HTML 元素具有预设的设计，如元素的不便的小方块、元素的有限颜色条以及元素的“让人感到不适”箭头。我们可以通过样式设置它们以匹配我们网站的现代美学，同时利用它们的功能。还有许多元素在现代网页设计中很少以它们的默认外观和功能使用，比如<input type="checkbox">、<meter>、<details>。
其中一个 HTML 元素是<fieldset>，以及它的子元素<legend>。
<fieldset>元素传统上用于对表单控件进行分组和访问。我们可以通过屏幕上围绕分组内容的边框来直观地看到这种分组。该组的标题位于作为<fieldset>的第一个子元素添加的<legend>元素内。
通过<fieldset>和<legend>的组合，可以创建一个独特的“文本在边框中”的设计，其中标题直接放置在边框处，而边框的线条不穿过文本。当边框遇到标题文本的开头时，边框线“断开”，在文本结束后恢复。
在这篇文章中，我们将利用<fieldset>和<legend>的组合创建一个更现代的边框文本设计，这样的设计编码和更新都非常快速简便。
为了实现四个边框，我们需要四个元素，每个元素包含一个<legend>元素。我们将要显示在边框上的文本添加到这些元素内。
<fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>首先，我们在网格单元中将这些元素堆叠在彼此上方，并给它们添加边框。可以使用任何方式进行堆叠，不一定要使用网格。
只有每个元素的顶部边框保持可见，因为默认情况下元素的文本出现在<fieldset>的顶部边框上。
此外，我们给所有元素都添加了一个box-sizing属性，其值为border-box，以便元素的宽度和高度包括其边框和填充大小。稍后进行这样的设置可以创建一个平衡的设计，当我们样式化元素时。
body {
display: grid;
margin: auto; /* 居中 */
margin-top: calc(50vh - 170px); /* 居中 */
width: 300px;
height: 300px;
}
fieldset {
border: 10px solid transparent;
border-top-color: black;
box-sizing: border-box;
grid-area: 1 / 1; /* 第一行，第一列 */
padding: 20px;
width: inherit;
}接下来，我们旋转最后三个元素，以便使用它们的顶部边框作为设计的侧边和底边。
/* 向右旋转 */
fieldset:nth-of-type(2) {
transform: rotate(90deg);
}
/* 向下旋转 */
fieldset:nth-of-type(3) {
transform: rotate(180deg);
}
/* 向左旋转 */
fieldset:nth-of-type(4) {
transform: rotate(-90deg);
}接下来是对元素的样式设置。使用<legend>元素创建平滑边框文本的关键是给它一个零（或足够小的）line-height。如果line-height太大，它会使元素所在边框的位置发生偏移，将边框推下去。当边框随着line-height移动时，我们将无法连接设计的所有四个边，需要重新调整边框。
legend {
font: 15pt/0 'Averia Serif Libre';
margin: auto; /* 居中 */
padding: 0 4px;
}
fieldset:nth-of-type(3) > legend {
transform: rotate(180deg);
}我使用了简写属性为元素的font、font-size和line-height属性设置值。
在我们的设计中添加文本的底部边框的元素<legend>是颠倒的，因为它的旋转父元素。垂直翻转该元素，以使文本正常显示。
fieldset:nth-of-type(3) > legend {
transform: rotate(180deg);
}在第一个元素中添加一个图像，你会得到类似以下的效果：
侧边距可以沿着边框移动文本。左右边距带有值将使文本居中，如上述 CodePen 中所示。仅具有值的左边距将使文本靠右对齐，反之亦然。
额外内容： 在一个简短的几何曲线之后，这是我使用相同技术制作的一个八边形设计：