搜索
查看: 1352|回复: 0

html视频标签圆角效果

[复制链接]

675

主题

984

帖子

2489

积分

管理员

本论坛第一帅

Rank: 9Rank: 9Rank: 9

积分
2489

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2021-7-16 09:46:05 来自手机 | 显示全部楼层 |阅读模式

有没有办法使用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>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表