在html5视频的圆角 [英] rounded corners on html5 video
本文介绍了在html5视频的圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法,我可以使用CSS3 border-radius属性剪切我的html5视频元素的角落?
Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?
查看此示例。它不工作。
推荐答案
创建一个带有圆角和溢出的div容器:hidden。然后将视频放入其中。
Create a div container with rounded corners and overflow:hidden. Then place the video in it.
<style>
.video-mask{
width: 350px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
这篇关于在html5视频的圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文