Question

因此，我试图通过将setInterval标记括在带有圆角的div中来制作圆角视频。在Chrome和FF中效果很好，但在Safari中效果不佳。我想这只是Safari的一个限制，但我只是想把它扔出去，看看是否有人知道解决方法。

<video>

.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;
}

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>

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

1 个答案: