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得到隐藏隐藏边界半径.

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

有时候分配第一个和最后一个孩子的边界半径将不起作用,比如说我想在我的包装div上,

padding: 5px 10px;

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

Answer 1

overflow: hidden 会修复:)

#wrap {
   overflow: hidden;
   ...
}

jsFiddle.

例

我把背景变成了黄色,看得很清楚.正如你所看到的,边缘有一些黑色的流血.该示例来自OS X上的Chrome 10.