假设我有这个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;
然后,即使我要指定一个边界半径,它们也不会匹配使它变得难看.
解决方法
溢出：隐藏会修复:)
#wrap {
overflow: hidden;
...
}
例
我把背景变成了黄色,看得很清楚.正如你所看到的那样,边缘有一些黑色的流血.该示例来自OS X上的Chrome 10.
