<style type="text/css">
	.box2,.box2 img{width: 400px;height: 400px;position: relative;}
	.box2 img{object-fit: cover;}
	.circle img{
clip-path: circle(50%);
	}
	.inset img{
clip-path: inset(100px 100px)
	}
	.inset1 img{
clip-path: inset(100px 100px round 10px)
	}
	.ellipse img{
clip-path: ellipse(45% 30% at 50% 50%);
	}
	.polygon img{
clip-path:  polygon(50% 0,100% 50%,0 100%);
	}
	.polygon1 img{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
	.polygon2 img{
clip-path: polygon(0% 0%, 0% 200px,200px 200px,200px 0%);
	}
	.polygon3 img{
clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
	}
	.polygon4 img{
clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)
	}
</style>
<p>矩形 clip-path: inset(100px 50px)</p>
<div class="box2 inset">
	<img src="../img/4.jpg"/>
</div>
 <p>圆角矩形 clip-path: inset(100px 50px round 10px)</p>
<div class="box2 inset1">
	<img src="../img/4.jpg"/>
</div>
<p>圆 clip-path:circle(50%)</p>
<div class="box2 circle">
	<img src="../img/4.jpg"/>
</div>
<p>椭圆 clip-path:ellipse(45% 30% at 50% 50%)</p>
<div class="box2 ellipse">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:三角形 polygon(50% 0,100% 50%,0 100%)</p>
<div class="box2 polygon">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:菱形  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</p>
<div class="box2 polygon1">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正方形  clip-path: polygon(0% 0%, 0% 100%,100% 100%,100% 0%)</p>
<div class="box2 polygon2">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正五边形  clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%)</p>
<div class="box2 polygon3">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正六边形  polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)</p>
<div class="box2 polygon4">
	<img src="../img/4.jpg"/>
</div>