admin 发表于 2021-7-16 09:46:05

html视频标签圆角效果


有没有办法使用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>
页: [1]
查看完整版本: html视频标签圆角效果