蒙版视频 iframe 周围的边框答案

【问题标题】：Border around masked video iframe蒙版视频 iframe 周围的边框
【发布时间】：2016-12-21 00:05:11
【问题描述】：

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

这是我通过 css 应用蒙版的视频 div

.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 后，我的边框不再可见。我可以以某种方式实现这一点（其他方式也可以）？

【问题讨论】：

你的意思是“我的边框不再可见”，从你的代码中有 div 元素的边框，它似乎正在工作 - JsFiddle
当我在谷歌浏览器中打开它时，它没有显示边框：6px solid #fff;来自我的代码。
你试过#fff以外的其他颜色
是的，但它不起作用。我试过 .videoCircle:after { content:'';边框：6px 纯红色；位置：绝对； z-index：40000； }
有没有办法以圆形显示视频而不是添加：-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

标签： jquery html css video iframe

【解决方案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。

【讨论】：