clip-path属性用于裁剪CSS的形状或元素。使用inset()函数时，你提到的四个参数（上，右，下，左）确实定义了一个矩形的边界，矩形以外的部分将被裁剪。这四个参数的值的单位可以是像素（px）或百分比（%），但使用像素单位时，确实可能会造成页面的重绘。这主要是因为在某些情况下，像素单位可能会导致浏览器的重排或重绘，从而影响性能。
clip-path示例代码介绍：
clip-path: inset(10px 20px 25px 30px);
clip-path的属性语法讲解
-webkit-clip-path这里加-webkit- 是为了兼容老版本的chrome和safari；
polygon 这个表示剪切路径是”多边形“，那么后边就是多边形各顶点的坐标；
50% 0%, 0 100%, 100% 100%这些就是顶点坐标了：
以逗号分隔的是3个顶点；每个顶点的x,y坐标以空格分隔，以左上角为起点；坐标可以用px像素，也可以用%百分比。
裁切的路径，除了polygon以外，还有circle圆形，inset矩形，ellipse椭圆等，我们在后面例子中会有示范。
clip-path三角形
.div{ -webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);}
clip-path菱形
.div{-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
clip-path梯形
.div{-webkit-clip-path: polygon(20% 0%,80% 0%, 100% 100%, 0% 100%);}
clip-path沙漏
.div{-webkit-clip-path: polygon(0% 0%,100% 0%, 0 100%, 100% 100%);}
clip-path平行
.div{-webkit-clip-path: polygon(30% 0%,100% 0%, 70% 100%, 0% 100%);}
clip-path五边形
.div{-webkit-clip-path: polygon(50% 0%, 100% 36%, 80% 100%, 20% 100%, 0% 36%);}
clip-path五角星
.div{-webkit-clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
clip-path六边形
.div{-webkit-clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);}
clip-path六角星
.div{-webkit-clip-path: polygon( 50% 0%, 66% 24%,100% 24%, 82% 50%,100% 76%,66% 76%, 50% 100%, 34% 76%,0% 76%,18% 50%, 0% 24%,34% 24%);}
clip-path箭头
.div{-webkit-clip-path: polygon(0% 20%,66% 20%,100% 50%,66% 80%,0 80%);}
clip-path箭头2
.div{-webkit-clip-path: polygon(0% 33%,66% 33%,66% 0%,100% 50%,66% 100%,66% 66%,0 66%);}
clip-path半圆
.div{-webkit-clip-path:circle(50% at 50% 0%);}
clip-path椭圆
.div{-webkit-clip-path:ellipse(50% 25% at 50% 50%);}
clip-path圆角
.div{-webkit-clip-path:inset(0 round 20%);}
clip-path树叶
.div{-webkit-clip-path:inset(0 round 0 100% 0 100%);}
clip-path水滴
.div{-webkit-clip-path:inset(0 round 0 100% 100% 100%);}
上面是“css3中clip-path的属性语法介绍（裁剪范围计算）”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_13620.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
