在html5视频的圆角 [英] rounded corners on html5 video

问题描述

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

查看此示例。

解决方案

尝试创建一个具有更圆角和溢出的父div容器：hidden。

 < 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> 
  

Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?

Check out this example. it's not working.

解决方案

Try to create a parent div container with rounder corners and overflow:hidden.

<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屋！