CSS边框半径未修剪Webkit上的图像

Question

我在弄清楚为什么在使用chrome而不是firefox或ie9时为什么#screen元素的边框半径消失了？

对于每个浏览器，我都有所有不同的前缀以及标准的border-radius：

保存图片的上方内容框称为#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;}

是因为chrome无法正确处理图像的“裁剪”吗？我认为这只是一个问题，当您在圆角容器中包含实际标签时，而不是通过css将img称为背景图像时。

关于G.Campos

Answer 1

Webkit无法处理儿童和孙子女的边界半径裁剪。真是太糟糕了。如果要进行边框裁剪，则必须直接在放置图像的div上，而不必深入层次结构。