美文网首页
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