這是一個非常不錯的效果，在實際制作中也比較常用，我們看下面的圖片：
或許你想到可以用圖片來實現這樣的效果，但圖片除了體積稍大，語義上也很欠缺。這樣的效果如何用xhtml+css實現呢？首先我們通過 fieldset設置一個方框（也譯作域），然后通過特定的標簽legend域標題，設置一個標題，並對它們進行相應的樣式定義即可實現這樣效果。我們首 先來了解一下fieldset方框、legend域標題這兩個標簽的知識。
HTML元素 fieldset方框
Draws a box around the text and other elements that the field set contains.
在字段集包含的文本和其它元素外面畫一個方框。
fieldset元素用於對表單中的元素進行分組並在文檔中區別標出文本。它與窗口框架的行為有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的腳本中可用。
fieldset元素元素是塊元素。 並且需要關閉標簽，即必須成對出現：<fieldset></fieldset>。
HTML元素 legend域標題
Inserts a caption into the box drawn by the fieldSet object.
在 fieldSet 對象繪制的方框內插入一個標題。
legend元素必必位於fieldset內的第一個元素。在 Internet Explorer 4.0 及以上版本的 HTML 和腳本中可用。
legend元素是塊元素。並且需要關閉標簽，即必須成對出現：<legend></legend>。
我們開始着手制作這樣的一個小實例，我們看下面的xhtml代碼：
Example Source Code
[www.52css.com]
<legend>52CSS.com CSS網頁布局</legend>
<ul>
<li>Div+CSS教程 系統的講述了關於CSS布局的知識</li>
<li>CSS布局實例 向你呈現了52css.com中的一些實例</li>
<li>CSS模板下載 你可以查看一些模板</li>
<li>CSS酷站欣賞 高手與大師的作品定會讓你有所收獲</li>
</ul>
</fieldset>
這是一個簡單的頁面，所有的代碼處於一個fieldset方框內，方框內的第一個元素為legend域標題，另外就是一個無序列表ul，隨機加了一些內容。我們看下面的css是如何定義的：
Example Source Code
[www.52css.com]
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;
或許你對此效果還不滿意，我們再作一些調整。讓它看起來更加的完美。
我們設置legend的邊框為一個象素的灰色實線：border:#b6b6b6 solid 1px;
並對legend設置了上下與左右的填充：padding:3px 6px;
我們看最終的運行效果圖片，看上去舒服多了：