我們常可以看到許多列表或文章段落是圓角的。在傳統的制作中，我們往往通過背景圖片來營造出圓角的效果。運用div css進行網頁布局，我們應該讓編碼更有語義，結構更加的簡單，更重要的是可以適應寬度與高度的變化。有序列表dl、無序列表ul的圓角我們可以僅通過四個角的圖片來實現。我們看下面的這一張圖片：


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

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

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


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

　　我們來看下面的CSS代碼：


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


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

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


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

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