使用自定义列表的简单圆角布局

这是一个使用自定义列表的简单圆角布局，参照来自Cssplay的Four curved corners with no extra markup or javascript 一文，完全采用CSS，可自适应宽度和高度，语义化比较好，结构简单，无空白标签存在。

实现原理

使用4张背景图片（圆角外面颜色和网页背景色一样，里面是透明的)，DL标签里填充左上角，DT填充右上角，DD填充左下角，P填充右下角(如有多行，在最下面P标签里，有点欺骗的味道。)，结构如下面。

1. <dl>
2. <dt>标题</dt>
3. <dd><p>内容</p></dd>
4. </dl>

扩展一下，用DIV、H3、UL实现

1. <div>
2. <h3>标题</h3>
3. <ul>
4. <li>内容</li>
5. <li>内容</li>
6. </ul>
7. </div>

CSS代码请参考演示页。

调试：IE6+、Firefox2.0、Opera9.0。

此圆角不推荐用在整体布局中，但可以很容易地用在信息区域。还有此种做法，个人感觉不太适于那些仅带边框透明背景的圆角.

演示地址