圆角包含在小分区中的大图像的侧面在 Chrome 中不起作用

我正在尝试用圆角化背景图像的侧面border-radius财产。

这是我的场景：

我将一个大图像放在一个小分区中作为背景，并将溢出隐藏起来。现在我需要对小部门进行四舍五入。我成功绕过了小师。但图像的角不是圆角的。

HTML:

<div class="video_thumb">
    <div style="background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg); " class="video-thumbnail"></div>
</div>​

CSS

.video_thumb {
    height: 250px;
    width: 300px;
    overflow:hidden;
    margin:20px;
    border: 1px solid red;
    z-index:100;
    position:relative;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.video-thumbnail {
    width: 520px;
    height: 100%;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    z-index:10;
    overflow:hidden;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

这是使用 jsfiddle 的演示

您可以看到左上和左下边框是圆形的。但右上角和右下角不是圆角的。如何使图像的所有角都变成圆角？

我尝试添加z-index, overflow: hidden到两个div，但没有运气。

EDIT:

此问题仅适用于 Google Chrome。在 Firefox 浏览器上运行良好。

这似乎是一个 Chrome 错误，您应该考虑将其提出@http://code.google.com/p/chromium/issues/list

现在，您可以通过更改来“解决它”position: relative to position: static

一个黑客修复

As 在这里回答，您可以添加一个-webkit-mask-image到父元素以隐藏溢出的内容：

.video_thumb {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}