乐趣区

关于css:生僻标签-fieldset-与-legend-的妙用

jiezi

谈到 <fieldset> 与 <legend>，大部分人必定会比拟生疏，在 HTML 标签中，属于比拟少用的那一批。

我最早晓得这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置对立代码默认款式的 CSS 中看到的。最近因为钻研边框，遇到了这两个标签，发现它们还是很有意思的，遂起一篇，将整顿的一些知识点分享给大家。

理解 <fieldset> 与 <legend>

通常而言，<fieldset> 与 <legend> 比拟罕用在表单当中。

  • <fieldset>：HTML <fieldset> 元素用于对表单中的管制元素进行分组
  • <legend>：在 <fieldset> 中内置了一个 <legend> 元素作为 fieldset 的题目

简略而言，fieldset 能够独自应用，对表单的元素进行分组，而 legend 则须要和 fieldset 配套应用，成对呈现， 作为分组的题目 。

看个简略的例子，简略的 HTML 及构造如下：

<fieldset>
    <legend>Form</legend>
    <div>
        <label>Name :</label><input type="text" placeholder="input Name" />
    </div>
    <div>
        <label>Password :</label><input type="text" placeholder="input Name" />
    </div>
</fieldset>
fieldset {
    border: 1px solid#ddd;
    padding: 12px;
}

legend {
    font-size: 18px;
    padding: 0 10px;
}

成果如下：

CodePen Demo — fieldset & legend Demo

比拟有意思的点在于，如果给 fieldset 设置了 border 边框，则 legend 元素内的内容则会作为分组的题目，嵌入 border 内。

管制 legend 的地位及款式

对于 legend 的地位和款式，是能够进行管制的。

对于地位，咱们能够通过 margin 和 父元素的 padding 进行管制，如果父元素 fieldset 不设置 padding，legend 不设置 margin，则 legend 默认定位在最左侧。

fieldset {
    border: 1px solid#ddd;
    // padding: 12px;
}

legend {font-size: 18px;}

效果图：

通过扭转 legend 的 margin 或者父元素的 padding-left，能够管制题目的初始地位：

fieldset {border: 1px groove #ddd;}

legend {animation: marginMove 10s infinite alternate;}

@keyframes marginMove {
    100% {margin-left: 100px;}
}

效果图：

通过管制 legend 的 padding，能够减少四周元素的区域，让留白更多一点。

利用场景 — 题目两侧横线

理解了上述基本知识后，咱们就能够略微开始深刻，想一想，上述 <fieldset> 与 <legend> 的一些有意思的利用场景。

最适宜的场景我感觉应该就是题目两侧带横线的布局了。相似这样：

当然，这个布局的解决形式有很多，通常会应用伪元素来生成左右两侧的横线，或者是通过相对定位部分进行笼罩叠加。

这里，应用 <fieldset> 与 <legend> 十分疾速的实现：

<div class="g-container">
    <fieldset><legend> 排行榜 </legend></fieldset>
</div>
fieldset {
    width: 300px; 
    height: 24px; 
    border: 1px solid transparent; 
    border-top-color: #000; 
}

legend{
    margin: auto; 
    padding: 0 10px; 
}

fieldset 只设置上边框，通过 margin: auto 将题目定位到两头，通过 padding 管制两侧的留白。十分的完满。

CodePen Demo — fieldset & legend Demo 2

边框嵌套文字

在这篇文章中 — How to Add Text in Borders Using Basic HTML Elements，还介绍了一种十分有意思的应用场景， 在边框中嵌套文字 。

设想一下，一个 <fieldset> 元素配合一个 <legend> 元素，能够生成一个边框嵌文字的成果，那么，将多组组合，再进行定位排布，就能够生成多边边框嵌套文字的成果了。

伪代码如下：

<div class="g-container">
    <fieldset><legend>CSS fieldset</legend></fieldset>
    <fieldset><legend>HTML element</legend></fieldset>
    <fieldset><legend>JavaScript</legend></fieldset>
    <fieldset><legend>TypeScript</legend></fieldset>
</div>
.g-container {
    position: relative;
    width: 300px; 
    height: 300px; 
}
fieldset{
    position: absolute;
    width: 300px; 
    height: 300px; 
    border: 10px solid transparent; 
    border-top-color: #000; 
}
legend{padding: 0 10px;} 

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

效果图如下：

通过多个 <fieldset> 和 <legend> 的组合，咱们能够拼出一个容器的 4 个边，组成一个十分难看的边框嵌文字效果。

通过给 legend 加上 animation，让文字动起来 

legend{animation: move 3s infinite linear alternate;} 
@keyframes move {
    100% {margin-left: 70px;}
}

CodePen Demo — Border Text Design using HTML fieldset and legend

好，基于这个，咱们就能够去生成各种 N 边形边框嵌文字的边框了。上面是简略的尝试 几种多边形边框。

CodePen Demo — fieldset and legend generate polygon

最初

本文到此结束，心愿对你有帮忙 :)，想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 ????

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版