css – html5视频的圆角

前端之家收集整理的这篇文章主要介绍了css – html5视频的圆角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法使用CSS3 border-radius属性来切断我的html5视频元素的角落?

查看this example.它不工作。

解决方法

创建一个带有圆角和溢出的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>
原文链接:https://www.f2er.com/css/219208.html

猜你在找的CSS相关文章