clip-path CSS属性可以通过定义渲染区域来裁剪元素的可视区域。这里有几种方法来使用clip-path属性

使用内置的方式

圆形

css

.conter img{
        width: 100%;
        clip-path: circle(50%);
    }

椭圆

css

.conter img{
        width: 100%;
        clip-path: ellipse(50% 30%);
    }

三角形

css

.conter img{
        width: 100%;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

使用CSS的inset()函数来定义裁剪区域

css

.conter img{
        width: 100%;
        clip-path: inset(20% 20% 20% 20%);
    }

注意：clip-path属性不被IE浏览器支持。