谈到 <fieldset>
与 <legend>
,大部分人确定会比较陌生,在 HTML 标签中,属于比较少用的那一批。css
我最先知道这两个标签,是在早年学习 reset.css 或者 normalize.css 时,在这些重置统一代码默认样式的 CSS 中看到的。最近由于研究边框,遇到了这两个标签,发现它们仍是颇有意思的,遂起一篇,将整理的一些知识点分享给你们。html
<fieldset>
与 <legend>
一般而言,<fieldset>
与 <legend>
比较经常使用在表单当中。git
<fieldset>
:HTML <fieldset>
元素用于对表单中的控制元素进行分组<legend>
:在 <fieldset>
中内置了一个 <legend>
元素做为 fieldset 的标题简单而言,fieldset 能够单独使用,对表单的元素进行分组,而 legend
则须要和 fieldset
配套使用,成对出现,做为分组的标题。github
看个简单的例子,简单的 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 Demospa
比较有意思的点在于,若是给 fieldset
设置了 border
边框,则 legend
元素内的内容则会做为分组的标题,嵌入 border
内。code
legend
的位置及样式对于 legend
的位置和样式,是能够进行控制的。orm
对于位置,咱们能够经过 margin
和 父元素的 padding
进行控制,若是父元素 fieldset
不设置 padding
,legend
不设置 margin ,则 legend
默认定位在最左侧。htm
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
本文到此结束,但愿对你有帮助 :)
更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
若是还有什么疑问或者建议,能够多多交流,原创文章,文笔有限,才疏学浅,文中如有不正之处,万望告知。