CSS3 border-radius父子问题

Question

假设我有这个css，

#wrap {width: 190px; padding: 0 10px; border-radius: 10px; background: #000;}
#wrap a {width: 190px; padding: 10px; display: block;}
#wrap a:hover {background: #fff;}

这个HTML，

<div id="wrap">
<ul>
<li><a href="#">Some Link 1</a></li>
<li><a href="#">Some Link 2</a></li>
<li><a href="#">Some Link 3</a></li>
<li><a href="#">Some Link 4</a></li>
</ul>
</div>

现在链接完全适合#wrap，但#wrap有一个边框半径和一个黑色背景。因为在悬停时链接具有白色背景，第一个子元素和最后一个子元素位于边界半径角上方。但是当他们坐在顶部时，#wrap的背景隐藏了border-radius。

我知道我可以为第一个和最后一个孩子分配一个边界半径，但有更简单的方法吗？

有时候分配第一个和最后一个孩子边框半径不起作用，比如说我想在我的包装div上这样做，

padding: 5px 10px;

然后，即使我要指定一个边界半径，它们也不会匹配使它变得难看。

Answer 1

overflow: hidden会修复：）

#wrap {
   overflow: hidden;
   ...
}

jsFiddle

实施例

我将背景设为黄色以便清楚地看到它。正如你所看到的，边缘有一些黑色的流血。该示例来自OS X上的Chrome 10。