在實際製作網頁中，我們有時會要這樣的效果：

或許我們可以通過圖片實現，但是在html中有一個標籤會很輕鬆的幫我們實現，他就是標籤。

HTML元素 fieldset方框

Draws a box around the text and other elements that the field set contains.
在欄位集包含的文字和其它元素外面畫一個方框。

fieldset元素用於對錶單中的元素進行分組並在文件中區別標出文字。它與視窗框架的行為有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的指令碼中可用。

fieldset元素元素是塊元素。 並且需要關閉標籤，即必須成對出現：。

HTML元素 legend域標題

Inserts a caption into the box drawn by the fieldSet object.
在 fieldSet 物件繪製的方框內插入一個標題。

legend元素必必位於fieldset內的第一個元素。在 Internet Explorer 4.0 及以上版本的 HTML 和指令碼中可用。
legend元素是塊元素。並且需要關閉標籤，即必須成對出現：。

例項

Html程式碼

• Div+CSS教程 系統的講述了關於CSS佈局的知識
• CSS佈局例項 向你呈現了52css.com中的一些例項
• CSS模板下載 你可以檢視一些模板
• CSS酷站欣賞 高手與大師的作品定會讓你有所收穫

這是一個簡單的頁面，所有的程式碼處於一個fieldset方框內，方框內的第一個元素為legend域標題，另外就是一個無序列表ul，隨便加了一些內容。

CSS樣式表：

Html程式碼

* {
font-size:12px;
margin:0;
padding:0;
}
fieldset {
padding:10px;
margin:10px;
width:270px;
color:#333;
border:#06c dashed 1px;
}
legend {
color:#06c;
font-weight:800;
background:#fff;
}
ul {
list-style-type: none;
margin:8px 0 4px 0;
}
li {
margin-top:4px;
}

整體的佈局宣告：文字大小12px，邊距與填充均為零。
fieldset方框的設定：填充與邊距都是10px。設定寬度為270px。文字顏色深灰色#333。邊框為一象素的藍色#06c虛線。
legend域標題的設定：文字顏色為藍色#06c，文字加粗，背景色為白色#fff。
對無序列表ul及列表項li進行相關的一些設定。

我們定義fieldset的邊框的樣式border，在IE6裡邊框會與legend裡的文字重合疊加，而預設的樣式則不會。我們給legend一個背景遮擋邊框，這裡是background:#fff;

這樣我們就得到了上面的效果。