css - 容器或内容项上的 CSS3 边框半径？

Question

在这个小提琴http://jsfiddle.net/dAHqe/2/中，我为列表的 2 个主要用途（我已经看到）创建了示例border-radius。

1. 将border-radius（因此background-color）应用于容器（adiv或 a ul）。
2. 通过and伪类应用border-radius（因此background-color）到第一个和最后一个内容项（lis 或嵌套divs） 。:first-child:last-child

乍一看，第一种方式（将其应用于容器）看起来要简洁得多，但我一直看到第二种方式。

使用第二种方式有什么好的理由（即可扩展性）吗？

更新：这是一个移动应用程序，所以我不需要:hover伪类。

Answer 1

就个人而言，在您给出的示例中，我总是选择简单的选项并将其放在容器上。

但是，以其他方式执行此操作的原因：

• 可能你没有容器，也无法更改代码来添加容器。

• 您有一些理由希望能够灵活地更改单个列表项，而使用单个容器是行不通的。例如，也许您想让它们在悬停时半透明？

• 您必须解决一个尴尬的 HTML 结构。不久前我遇到过这样的情况，我必须在复杂表格中的单元格中添加圆角。有问题的单元格是更大表格中的副标题行和列，但它们全部组合在一起的方式意味着我必须将圆角单独放入单独的单元格中。这既繁琐又尴尬，但最终看起来他们想要它。

• 编码人员不太了解 CSS，只是从其他地方以这种方式编写它。

这些是我能想到的唯一原因。但我怀疑大多数情况都属于其中一种。

希望有帮助。