美文网首页
css中clip-path剪切的用法

css中clip-path剪切的用法

作者: 羊驼626 | 来源:发表于2020-04-29 16:25 被阅读0次

1.clip-path: polygon() 多边形切割

//多边形切割 polygon(x轴点位 y轴点位, x轴点位 y轴点位 ...)
clip-path: polygon(0 0, 25% 0, 100% 75%, 100% 100%, 0 0); 

2.clip-path: circle() 圆形切割

 //圆形切割 circle(圆角程度 at 圆角圆心x 圆角圆心y )
clip-path: circle(40% at 50% 50%);

3.clip-path: ellipse() 椭圆切割

//椭圆切割 ellipse(x轴圆角程度 y轴圆角程度 at 圆角圆心x 圆角圆心y )
clip-path: ellipse(30% 50% at 50% 50%); 

4.clip-path: inset() 圆角切割

// 圆角切割 inset(上内边距 右内边距 下内边距 左内边距 round 左上圆角程度 右上圆角程度 右下圆角程度 左下圆角程度)
clip-path: inset(10% 20% 20% 10% round 20% 30% 40% 50%); 

相关文章

网友评论

      本文标题:css中clip-path剪切的用法

      本文链接:https://www.haomeiwen.com/subject/aoknwhtx.html