Question

我有一个圆形div包装图像和另外两个div。问题是它在这个div周围显示为灰色边框。问题出在所有浏览器chrome和firefox上。我试过把浏览器css-vendor-prefixes，mask但没有结果。

我无法使用：

img {
  width: 100%;
  height: 100%;
  border-radius: 120px;
}

因为图像的宽高比不正确。它位于1:1。它应该在16:9上，因为它是YouTube视频帧。

<div class="video_wrap">
    <div class="views">1651</div>
        <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
    <div class="title">o'najr</div>
</div>

.video_wrap {
    width: 240px;
    height: 240px;
    border-radius: 120px;
    overflow: hidden;
}

.views, .title {
    position: relative;
    background: #fff;
    height: 50px;
    color: #f8008c;
    text-align: center;
    line-height: 50px;
}

.views {
    top: 0px;
    z-index: 2;
}

.title {
    top: -100px;
}

.video_wrap img {
    height: 100%;
    position: relative;
    top: -50px;
}

小提琴http://jsfiddle.net/h3198LfL/

Answer 1

您可以从border-radius:120px中删除.video_wrap并将以下内容添加到img

img{
   width:100%;
   border-radius: 120px;
}

<强>段

.video_wrap {
  width: 240px;
  height: 240px;
  overflow: hidden;
}
img {
  width: 100%;
  border-radius: 120px;
}
.views,
.title {
  position: relative;
  background: #fff;
  height: 50px;
  color: #f8008c;
  text-align: center;
  line-height: 50px;
}
.views {
  top: 0px;
  z-index: 2;
}
.title {
  top: -100px;
}
.video_wrap img {
  height: 100%;
  position: relative;
  top: -50px;
}

<div class="video_wrap">
  <div class="views">1651</div>
  <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
  <div class="title">o'najr</div>
</div>

Answer 2

在视频包装中添加webkit代码和其他代码，如：

.video_wrap {
width: 240px;
height: 240px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-ms-border-radius:120px;
-o-border-radius:120px;
border-radius: 120px;
overflow: hidden;
}

要避开边框，可以设置它的新行，如：

.video_wrap img {
border:0px;
border:none;
}

DEMo

用边框半径隐藏的溢出在图像上显示一个奇怪的灰色边框

2 个答案: