CSS边框半径不在Webkit上修剪图像

Question

在使用chrome而不是firefox或ie9时，我无法弄清楚为什么border-radius从我的#screen元素消失了？

我为每个浏览器添加了所有不同的前缀加上标准border-radius：

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;}

是否因为镀铬无法正确处理图像的“修剪”？我认为只有在圆角容器内部有实际标签时才会出现问题，而不是通过css将img称为background-image。

此致 G.Campos

Answer 1

这是解决当前chrome bug的解决方法：

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

这根本不会影响显示（与opacity:0.99解决方法不同 - 顺便说一句，这也是很好的解决方法）。

Answer 2

Webkit无法处理儿童和孙子+的边界半径裁剪。这很糟糕。如果你想要边框裁剪，它必须直接在图像被放置的div上，而不是在层次结构中更深层次。

Answer 3

有一个更简单的解决方案。

只需将overflow:hidden添加到具有border-radius的容器中并保存子元素即可。这可以防止孩子们在容器上流动。从而解决问题并显示边界半径

Answer 4

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

Answer 5

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

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

Answer 6

它确实有一个边界半径：

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

边界半径不会将其内容限制在结果区域内 - 角落外的空间仍然可以被元素的内容占据。

我的建议是覆盖一个角落切出的图像（然后使用地图或任何你觉得舒服的东西来启用左/右箭头）。