小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
上次最后提到css函数中颜色函数，这次就从这里继续
图形函数
注意: 以下几个函数都是clip-path属性的参数。
circle()
circle()用来创建一个圆形区域来屏蔽它所应用的元素。可以指定它的半径和位置。通常与图像一起使用来创建圆角形状。
该函数有几个参数，都是可选的，如果参数缺省，则由浏览器来决定它的默认值。第一个参数是圆形的半径。第二个参数是位置，不是图片在整个页面的位置，而是图片改变形状后相对于原图像的位置，这样讲比较抽象，来看看例子。
<img src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="circle"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="circle2"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
img {
width: 300px;
}
.circle {
clip-path: circle();
}
.circle2 {
clip-path: circle(100px at 0% 0%);
}
例子一出，大家应该就理解了，同时也可以看出这个函数是实现圆形头像的一把好手啊。反正我看到这个属性想到的就是这个。
ellipse()
圆形之后大家第一个想到肯定是椭圆，这不就来了吗。
ellipse()函数用于定义一个椭圆形。它的参数和circle()函数相同，但是它可以指定2个半径值：rx和ry，分别代表椭圆的X轴半径和Y轴半径。
<img src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="ellipse"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="ellipse2"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
img {
width: 300px;
}
.ellipse {
clip-path: ellipse(20% 50%);
}
.ellipse2 {
clip-path: ellipse(50px 70px at 30% 80%);
}
inset()
inset()指定一个矩形。它的参数为4个偏移值，用于指定矩形4条边在参考盒模型各个方向上的偏移。
取值方式和margin。padding都相同，可以选择给出1，2，3，4个值。
除了4个偏移值，inset()函数还有一个可选的圆角参数，语法格式和border-radius属性相同。如果要指定圆角，必须带上round关键字。
演示一波：
<img src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="inset"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="inset2"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
img {
width: 300px;
}
.inset {
clip-path: inset(50px 30px);
}
.inset2 {
clip-path: inset(10% 20% round 5px);
}
polygon()
polygon()用于定义一个多边形。它的参数是一组坐标对，每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。
除了坐标对参数，polygon()函数还可以使用一个可选的关键字fill-rule。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero 和evenodd。默认值为nonzero。
来直观感受下：
<img src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
<img class="polygon"src="F:/壁纸/wallhaven-y8vlyk.jpg"/>
img {
width: 300px;
}
.polygon {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
本来今天打算和滤镜函数一起讲掉，无奈滤镜东西比较多，只能下次再来啦
