视频：clip-path裁剪举例
<style>.mama {
margin: auto;
width: 740px;
height: 520px;
background: linear-gradient(to right, olive, lightgreen, pink);
position: relative;
}
.mtv {
position: absolute;
width: 500px;
height: 500px;
left: 230px;
top: 10px;
background: tan;
text-align: center;
line-height: 500px;
clip-path: circle(35% at 50% 51%);
}
</style>
<div class="mama">
<iframe class="mtv" frameborder="0" src="https://haokan.baidu.com/v?vid=8132915352905853598&pd=pcshare"></iframe>
</div>
先上代码：
<style>
.mama {
margin: auto;
width: 740px;
height: 520px;
background: linear-gradient(to right, olive, lightgreen, pink);
position: relative;
}
.mtv {
position: absolute;
width: 500px;
height: 500px;
left: 230px;
top: 10px;
background: tan;
text-align: center;
line-height: 500px;
clip-path: circle(35% at 50% 51%);
}
</style>
<div class="mama">
<iframe class="mtv" frameborder="0" src="https://haokan.baidu.com/v?vid=8132915352905853598&pd=pcshare"></iframe>
</div>
我刚才也做出来了。谢谢老黑！ 技法：
一、首先，考虑视频对象，先布置好它的位置，包括尺寸、定位等，确保视频能够正常显示视口。此例中，视频要用 iframe 标签，所以 .mtv class类丢给它；
二、clip-path 的 circle 属性，如果需要可以使用三个参数：
clip-path: circle(圆形半径 at 圆心坐标)，其中，圆形半径可以用百分比、px值表示，at 之后是圆心{xy}坐标值，可以合写成一个值（xy值相等时），可以分开写（xy值不相等时）。本例的clip-path是：
clip-path: circle(35% at 50% 51%);
圆形半径是 35%，圆心位置在 {50% 51%} 处。 学习了。谢谢！{:4_190:} 这段视频有趣，不知道是什么地方的话。小宝贝很喜欢花呢{:4_173:} 红影 发表于 2022-5-10 14:41
这段视频有趣，不知道是什么地方的话。小宝贝很喜欢花呢
视频内容有点意思 加林森 发表于 2022-5-10 13:23
我刚才也做出来了。谢谢老黑！
嗯，要根据原始视频控制一下半径、位置。 马黑黑 发表于 2022-5-10 18:21
嗯，要根据原始视频控制一下半径、位置。
嗯嗯，明白的。 黑黑的新产品，小辣椒没有学习的太多了{:4_187:} 小辣椒 发表于 2022-5-10 19:26
黑黑的新产品，小辣椒没有学习的太多了
不急慢慢来 加林森 发表于 2022-5-10 19:03
嗯嗯，明白的。
{:4_190:} 马黑黑 发表于 2022-5-10 19:39
谢茶 继续学习新代码，真棒 谢谢老黑 {:4_187:}{:4_179:} 大猫咪 发表于 2022-5-10 20:13
继续学习新代码，真棒 谢谢老黑
{:4_180:} 马黑黑 发表于 2022-5-10 18:20
视频内容有点意思
很有趣{:4_173:} 红影 发表于 2022-5-11 11:15
很有趣
乡村题材挺好的 马黑黑 发表于 2022-5-11 12:15
乡村题材挺好的
原汁原味。 红影 发表于 2022-5-11 19:03
原汁原味。
是啊，就喜欢真实性