Question

<div class="videoCircle">
<iframe width="250" height="250" src="https://www.youtube.com/embed/wcVkPoPsuNU" frameborder="0" allowfullscreen></iframe>

这是我的视频div，我通过css应用了掩码

.videoCircle {
    width: 250px;
    height: 250px;
    position: absolute;
    border-radius: 125px;
    border: 6px solid #fff;
    top: 320px;
    margin:0 45% 0 45%;
    z-index: 30000;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

应用-webkit-mask-image后，我的边框不再可见。我可以以某种方式实现这一点（其他方式也可以）？

Answer 1

将-webkit-mask-image: ...替换为overflow: hidden。

.videoCircle {
  width: 250px;
  height: 250px;
  position: absolute;
  border-radius: 125px;
  border: 6px solid green;
  top: 320px;
  margin: 0 45% 0 45%;
  z-index: 30000;
  overflow: hidden;
  // -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

这里是fiddle。

屏蔽视频iframe周围的边框

1 个答案: