我正在尝试使用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;
}
您可以看到左上角和左下角的边框是圆形的。但是右上角和右下角不是圆角的。我们怎样才能使图像的所有角落都变圆?
我尝试将z-index
,添加overflow: hidden
到两个 div 中,但没有运气。
编辑:
此问题仅适用于 Google Chrome。在 Firefox 浏览器上运行良好。