我們�？梢钥吹皆S多列表或文章段落是圓角的。在傳統(tǒng)的制作中，我們往往通過背景圖片來營造出圓角的效果。運用div css進行網(wǎng)頁布局，我們應(yīng)該讓編碼更有語義，結(jié)構(gòu)更加的簡單，更重要的是可以適應(yīng)寬度與高度的變化。有序列表dl、無序列表ul的圓角我們可以僅通過四個角的圖片來實現(xiàn)。我們看下面的這一張圖片：


　　我們將圓角的多出部分設(shè)置成“背景色”，這里的背景色指的是網(wǎng)頁的背景色或此DL、UL容器的背景色。而內(nèi)部的顏色是透明的，我們可以根據(jù)不同的需要進行顏色的設(shè)置，而根本不需要去修改這四個圖片。

　　我們首先需要制作四張圖片備用，這四張圖片，分別是：topl.gif頂部的左側(cè)；topr.gif頂部的右側(cè)；botl.gif底部的左側(cè)，botr.gif底部的右側(cè)。這四張圖片分別定義在不同的背景容器里，營造出了圓角的效果。

　　我們來看有序列表DL的實現(xiàn)方法，我們看下面的XHTML代碼：


　　這是一個有序列表DL典型的代碼，只是在DD標簽中，我們另外加上了一個P標簽。這便于我們進行四個角落的圓角背景的設(shè)置。
　　將頂部的左側(cè)的背景定義在DL中；
　　將頂部的右側(cè)的背景定義在DT中；
　　將底部的左側(cè)的背景定義在DD中；
　　將底部的右側(cè)的背景定義在DD的P中。

　　我們來看下面的CSS代碼：


　　通過上面的CSS定義，我們就可以實現(xiàn)了DL有序列表的圓角布局的編寫，我們再將代碼細化一下，看看最終的運行效果：


　　我們根據(jù)上面的思路，可以很順利的制作出UL無序列表的圓角樣式。與上面不同的是，我們在最末一個列表項li定義底部右側(cè)的圓角。

　　我們來看以下代碼及其最終運行效果：


　　經(jīng)過上面的學(xué)習(xí)，我們應(yīng)該把握了圓角的一些用法，在其它容器里的應(yīng)用，只需要靈活的編寫與定義就可以了。

　　此文參考了forest的文章，在此表示感謝。