這是一個非常不錯的效果，在實際制作中也比較常用，我們看下面的圖片：


　　或許你想到可以用圖片來實現這樣的效果，但圖片除了體積稍大，語義上也很欠缺。這樣的效果如何用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代碼：


　　這是一個簡單的頁面，所有的代碼處于一個fieldset方框內，方框內的第一個元素為legend域標題，另外就是一個無序列表ul，隨機加了一些內容。我們看下面的css是如何定義的：


　　整體的布局聲明：文字大小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;
　　我們看最終的運行效果圖片，看上去舒適多了：


完整的最終代碼：


　　說明：用fieldset來進行這樣的布局或許不符合語義，fieldset必須用在form標簽里面。fieldset是一個比較“冷”的東西，對它的了解也很少，此問題等待以后發掘吧，有相關更新我會在mb5u.com上即時公布的。