如何使用基本 HTML 元素在边框中添加文本

一些 HTML 元素带有预设设计，例如<input type="checkbox"> 元素的不方便的小方块、<meter> 元素的有限颜色条以及<details> 元素的“某些方面让我感到困扰”的箭头。我们可以对其进行样式设置以匹配我们网站的现代美学，同时利用其功能。还有许多元素很少被用作同时其默认外观和功能在现代网页设计中不太需要。

<fieldset> HTML 元素及其子元素<legend> 就是这样的一个例子。

<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> 元素彼此堆叠在网格单元格中，并为其提供边框。您可以使用任何您想要的方式堆叠它们——它不一定要是网格。

由于<legend> 元素的文本默认情况下出现在<fieldset> 的顶边框处，因此每个<fieldset> 元素仅保留其顶部边框可见，而其余边框则为透明。

此外，我们为所有<fieldset> 元素提供了一个box-sizing 属性，其值为border-box，以便<fieldset> 元素的宽度和高度也包含其边框和填充大小。稍后执行此操作会在我们设置<legend> 元素的样式时创建分层设计。

body {
  display: grid; 
  margin: auto; /* to center */
  margin-top: calc(50vh - 170px); /* to center */
  width: 300px; height: 300px; 
}

fieldset {
  border: 10px solid transparent; 
  border-top-color: black; 
  box-sizing: border-box; 
  grid-area: 1 / 1; /* first row, first column */
  padding: 20px; 
  width: inherit; 
}

在此之后，我们旋转最后三个<fieldset> 元素，以便将它们的顶部边框用作我们设计的侧面和底部边框。

/* rotate to right */
fieldset:nth-of-type(2){ transform: rotate(90deg); }
/* rotate to bottom */
fieldset:nth-of-type(3){ transform: rotate(180deg); }
/* rotate to left */
fieldset:nth-of-type(4){ transform: rotate(-90deg); }

接下来是设置<legend> 元素的样式。使用<legend> 元素创建平滑边框文本的关键是为其提供零（或足够小）的line-height。如果它具有较大的行高，则会取代其所在边框的位置，将边框向下推。当边框随行高移动时，我们将无法连接设计的四个侧面，并且需要重新调整边框。

legend {
  font: 15pt/0 'Averia Serif Libre'; 
  margin: auto; /* to center */
  padding: 0 4px; 
}

fieldset:nth-of-type(3) > legend { 
  transform: rotate(180deg);
}

我使用font 简写属性为<legend> 元素的font-size、line-height 和font-family 属性提供值。

添加我们设计底部边框处文本的<legend> 元素，fieldset:nth-of-type(3)>legend，由于其旋转的<fieldset> 父元素而上下颠倒。垂直翻转该<legend> 元素以使其文本正向显示。

向第一个<fieldset> 元素添加图像，您将得到如下所示的内容

横向边距可以沿边框移动文本。具有auto 值的左和右边距将使文本居中，如上图所示。只有左边距具有auto 值时，文本才会与右侧对齐，反之亦然，对于右边距。

奖励：经过简短的几何绕行，这里有一个我使用相同技术制作的八边形设计