CSS边框半径不会裁剪Webkit上的图像

我无法找出为什么使用chrome而不是firefox或ie9时，我的#screen元素为什么边框半径消失了？

我为每个浏览器加上标准的边界半径有所有不同的前缀：

www.cenquizqui.com

包含图片的上方内容框称为#screen

屏幕的CSS复制粘贴：

#screen {background: none repeat scroll 0 0 #EEEEEE; display: block; height: 300px; position: relative; width: 960px; overflow:hidden; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px;} 

是因为铬不能正确处理图像的“修整”吗？ 我认为这只是一个问题，当你有圆angular容器内的实际标签，而不是当通过CSS调用img作为背景图像。

问候G.Campos

Answer 1

这是一个解决方法，将解决当前的铬错误：

 .element-that-holds-pictures { perspective: 1px; /* any non-zero value will work */ } 

这完全不会影响显示效果（ opacity:0.99解决方法 – 顺便说一句，这也是很好的解决方法）。

Answer 2

Webkit无法处理儿童和孙辈的边界半径裁剪。 只是那么糟糕。 如果你想边界裁剪，它必须直接放在图像所在的div上，而不必深入层次结构。

Answer 3

有一个更简单的解决scheme。

只需将overflow:hidden添加到具有border-radius的容器中并保存子元素即可。 这样可以防止儿童stream过容器。从而解决问题并显示边界半径

Answer 4

它非常有一个边界半径：

（我刚刚添加了Chrome的开发工具栏的边框。）

边界半径不会将其内容限制在结果区域内 – angular落外部的空间仍可由元素的内容占用。

我的build议是覆盖一个像这样的angular落切出的图像（然后使用地图或任何你感到舒服的东西仍然启用左/右箭头）。

Answer 5

尝试使用border-radius设置元素的子元素的以下CSS： opacity:0.99; 它解决了这个问题，并没有太多的改变不透明度。 这对我来说是完美的。

Answer 6

看起来你需要将边界半径应用于li元素：

 #slides li { display: block; float: left; height: 300px; width: 960px; position: relative; border-radius: 10px; }