css - 无法在包含视频的 div 上设置边框半径

Question

所以我正在尝试通过包含 <video> 来制作圆 Angular 视频在带有圆 Angular 的 div 中标记。在 Chrome 和 FF 中运行良好，但在 Safari 中运行不佳。我猜这只是 Safari 的一个限制，但我只是想把它扔出去看看是否有人知道解决方法。

.container {
  max-width: 560px;
  overflow: hidden;
  display: block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#video {
  display: block;
}

<div class="container">
  <video width="100%" autoplay muted id="video">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

Answer 1

我可以在 Safari 11.1 中重现这个问题。我能够通过将 border-radius 直接应用于视频元素来解决它，如下所示:

.container {
  max-width: 560px;
  overflow: hidden;
  display: block;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#video {
  border-radius: inherit;
  display: block;
}

<div class="container">
  <video width="100%" autoplay muted id="video">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>