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

Question

我正在尝试使用 border-radius 属性来圆化背景图像的边缘。

这是我的场景:

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

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

Here is a demo using jsfiddle

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

我尝试向两个 div 添加 z-index、overflow:hidden，但没有成功。

编辑:

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

Answer 1

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

目前，您可以通过将 position:relative 更改为 position: static 来“解决这个问题”

黑客修复

如answered here ，可以在父元素中添加-webkit-mask-image来 overflow hidden 的内容:

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