生僻標簽 fieldset 與 legend 的妙用

談到 <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 >
	<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 >
	<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 訂閱收藏，

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

標籤：其他

上一篇：css 移除某個上級屬性的影響

下一篇：用APICloud開發iOS App Clip詳細教程