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

许多HTML元素虽然功能性，但具有与现代Web Design Aesthetics冲突的默认样式。<fieldset></fieldset>和<legend></legend>，通常用于分组表单控件，提供了一种独特的解决方案来创建边界文本。这种组合本质地将文本定位在边界内，而没有边框线相交。本文展示了一种简单而有效的方法，可以利用此功能来创建时尚的边境文本设计。

我们将使用四个<fieldset></fieldset>元素，每个元素包含一个<legend></legend>边界文本的元素。核心原理涉及操纵这些元素的边界和定位以达到所需的效果。

首先，我们堆叠<fieldset></fieldset>元素，应用样式控制边界。只有每个的顶端<fieldset></fieldset>将可见；其他人变得透明。我们还利用box-sizing: border-box来确保尺寸稳定，包括边框和填充。可以使用各种布局方法（例如网格）来实现堆叠。

洗手

分开

戴口罩

待在家里

身体 {
  显示：网格；
  保证金：自动；
  边距：计算（50VH -170PX）;
  宽度：300px;
  身高：300px;
}

fieldSet {
  边界：10px实心透明；
  边界彩色：黑色；
  盒子大小：边框框；
  网格区域：1/1；
  填充：20px;
  宽度：继承；
}

为了创建侧面和底部边界，我们旋转最后三个<fieldset></fieldset>使用CSS变换的元素：

 / *旋转向右 */
fieldSet：nth-​​type（2）{变换：旋转（90DEG）; }
/ *旋转到底部 */
fieldSet：nth-​​type（3）{变换：旋转（180DEG）; }
/ *向左旋转 */
fieldSet：nth-​​type（4）{变换：旋转（-90deg）; }

接下来，我们为<legend></legend>元素。至关重要的是，小或零line-height对于精确边界对准至关重要。较大的线高可以使边界取代，从而破坏设计。我们还使用CSS变换来纠正底部的方向<legend></legend>元素，由于父母的旋转而倒置<fieldset></fieldset>。

传奇 {
  字体：15pt/0'Averia serif libre';
  保证金：自动；
  填充：0 4px;
}

fieldSet：nth-​​type（3）>传奇{
  变换：旋转（180摄氏度）；
}

将图像添加到第一个<fieldset></fieldset>增强设计。可以使用margin-left和margin-right属性调整边界内的水平文本对齐。两个边距的auto值中心文本。

奖励：可以扩展此技术以创建更复杂的形状，例如原始示例中显示的八角形设计。通过仔细调整旋转，定位和边界样式，可以进行各种创意边框文本设计。

以上是如何使用基本的HTML元素在边界中添加文本的详细内容。更多信息请关注PHP中文网其他相关文章！