容器或内容项上的 CSS3 border-radius？

Question

在这个 fiddle 中 http://jsfiddle.net/dAHqe/2/我已经为列表的 border-radius 的 2 个主要用途(我已经看到)创建了示例。

1. 将 border-radius(因此 background-color)应用于容器(div 或 ul).
2. 将 border-radius(以及 background-color)应用于第一个和最后一个内容项(li 或嵌套的 divs) 通过 :first-child 和 :last-child 伪类。

乍一看，似乎第一种方式(将其应用到容器)更简洁，但我一直看到第二种方式。

使用第二种方式是否有充分的理由(即可扩展性)？

更新:这是针对移动应用程序的，所以我不需要 :hover 伪类。

Answer 1

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

然而，以另一种方式进行的原因:

• 也许您没有容器，也无法更改代码来添加容器。

• 您出于某种原因希望能够灵活地更改单个列表项，而使用单个容器是行不通的。例如，也许你想让它们在悬停时半透明？

• 您必须解决笨拙的 HTML 结构。前段时间我有一个这样的案例，我不得不在复杂表格中的单元格中添加圆 Angular 。有问题的单元格是一个更大表格中的子标题行和列，但它们组合在一起的方式意味着我必须将圆 Angular 单独放入单独的单元格中。这既繁琐又尴尬，但最终看起来是他们想要的样子。

• 编码人员不太了解 CSS，只是从其他地方抄袭它。

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

希望对您有所帮助。