CSS3边框半径父子问题

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 的背景会隐藏在边框半径之外。

我知道我可以为第一个和最后一个孩子分配一个边界半径，但是有没有更简单的方法来做到这一点？

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

padding: 5px 10px;

那么即使我要指定一个边界半径，它们也不会匹配使它变得丑陋。

Answer 1

overflow: hidden 会解决这个问题:)

#wrap {
   overflow: hidden;
   ...
}

jsFiddle.

示例

为了看清楚，我把背景设为黄色。如您所见，边缘有一些黑色渗出。该示例来自 OS X 上的 Chrome 10。