Clip-path入门

来源:互联网 发布:修改列名的sql语句 编辑:程序博客网 时间:2024/06/06 02:21

今天用到clip-path,具体效果图如下

clip-path: inset(0px 0px 0px 0px round 10px 10px 0px 0px);  如图1

clip-path: polygon(10px 0px,130px 0px,130px 97px,0px 97px,10px 80px);  如图2 采用顺时针方向裁切,5个顶点坐标连接形成封闭曲线。


  Circle: circle(radius at x-axis y-axis)  切割圆形

  Ellipse: ellipse(x-rad y-rad at x-axis y-axis)  切割椭圆

  Polygon: polygon(x-axis y-axis, x-axis y-axis, … )  各种多边形

  Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius)    圆角矩形





0 0
原创粉丝点击