搜索
查看: 6806|回复: 0

html视频标签圆角效果

[复制链接]

714

主题

354

回帖

2669

积分

管理员

本论坛第一帅

积分
2669

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

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

有没有办法使用CSS3 border-radius属性来切断我的html5视频元素的角落?

解决方法
创建一个带有圆角和溢出的div容器:hidden。然后将视频放在其中。
[pre]
<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>
[/pre]
回复

使用道具 举报

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

本版积分规则

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