談到 <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
最后
本文到此結束，希望對你有幫助 :)
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。