html5视频上的圆角

Question

有没有办法可以使用CSS3 border-radius属性切断html5视频元素的角落？

看看这个例子.它不起作用.

Answer 1

创建一个带圆角和溢出的div容器:hidden.然后将视频放入其中.

<style>
.video-mask{
    width: 350px;
    border-radius: 10px; 
    overflow: hidden; 
}
</style>


<div class="video-mask">
    <video></video>
</div>

Answer 2

我们有一个播放圆角和阴影的视频，它很简单：

border-radius: 22px; overflow: hidden; -webkit-transform: translateZ(0); box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);

关键是-webkit-transform: translateZ(0)。这行代码告诉浏览器在 GPU 上渲染而不是使用

从 Safari 11、Chrome 65、Firefox 59、Edge Win 10 和 IE 11 开始测试和工作

Answer 3

只要为320px宽度的视频(16:9宽高比)设置适当的180px高度,它就可以在Firefox中使用- 否则弯曲的边框不可见,因为它们位于视频的帧之外.

WebKit中有一些突出的错误与它一起剪切内容border-radius,就像这个或特别是关于视频元素的内容一样.

Answer 4

不幸的是,Chrome和Safari不支持<video>元素的border-radius .

Answer 5

如果您的所有视频大小相同,则可以使用带有SVG文件的CSS掩码.如果您的视频是动态调整大小的,那会让事情变得更加困难...(编辑:SVG掩码似乎会自动缩放,因此此解决方案应该可行)

例如,你可以添加

-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)

到你的.rc类,它应该在Chrome中运行.

编辑:如果您删除视频中的内联height和width声明,这似乎只能起作用...但您可以将它们放入CSS中.

http://jsfiddle.net/QWfhF/2/

Answer 6

删除宽度属性 http://jsfiddle.net/vDPW2/10/