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


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

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

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


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

　　我們來(lái)看下面的CSS代碼：


　　通過(guò)上面的CSS定義，我們就可以實(shí)現(xiàn)了DL有序列表的圓角布局的編寫(xiě)，我們?cè)賹⒋�碼細(xì)化一下，看看最終的運(yùn)行效果：


　　我們根據(jù)上面的思路，可以很順利的制作出UL無(wú)序列表的圓角樣式。與上面不同的是，我們?cè)谧钅┮粋�(gè)列表項(xiàng)li定義底部右側(cè)的圓角。

　　我們來(lái)看以下代碼及其最終運(yùn)行效果：


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

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