随着浏览器对shape-outside和clip-path等属性的支持增加，CSSShapes越来越受到关注。有几种方法可以使用CSS形状，尤其是clip-path属性。乍一看，我们不知道如何使用这个属性。下面就来详细介绍一下。裁剪路径基础知识在深入研究之前，我们应该了解一下基本形状和裁剪路径。剪切路径可以将CSS形状（例如circle()、ellipse()、inset()或自由形式的polygon()应用于任何元素。元素中不在形状边界内的任何内容都将被剪裁以将其删除。使用多边形函数，我们可以创建三角形、星形或其他形状。虽然可以使用px等固定单位，但百分比将提供更大的灵活性并适应元素的大小。所以对于一个八边形，我们可以设置八组x，y点坐标来定义。在这种情况下，对于第一个x我们从框宽度的30%开始，对于y我们从框的顶部开始然后顺时针设置各个点。可视区域就是这些点用直线连接起来形成的形状。剪辑路径：多边形（30%0%、70%0%、100%30%、100%70%、70%100%、30%100%、0%70%、0%30%）；invisible在顶点上实现了一个八边形，我们设置八个点的坐标。但是，我们可以超越元素框的限制进行思考，也就是说，我们必须跳出0%-100%的范围。元素的框边框是裁剪内容的显示边界，但我们仍然可以为超出框边框的元素定义点。通过定义超出0%-100%范围的点，我们可以将具有三个点的多边形变成四边形、五边形或六边形。在此示例中，定义clip-path:polygon()函数的所有三个点，但由于它超出了元素框的边界，我们可以看到一个三角形和两个五边形。因此，上述八边形仅需四个点即可实现。一个剪切路径，多个形状我们可以利用这种能力通过一个polygon()创建多个剪切形状，使用这种能力超越元素的边界。根据元素的位置，我们可以直接制作每个形状，但是因为我们知道剪辑坐标点可以在元素框外的空间中移动，所以我们可以绘制额外的线来帮助我们找到下一个点的位置。它还可以帮助我们拆分元素。结合CSS自定义属性，我们可以处理重叠元素并将每个元素裁剪成交替的条带。下面的例子是两个重叠的圆角矩形的动画，每个圆角矩形被分成不规则的矩形。不同的填充规则和不同形状的CSS源码polygon()函数不仅仅是一组坐标点，它还有一个参数——填充规则，我们一直使用的默认值是非零的，它还有一个值是Evenodd，它们决定规则内外形状的两个值是不同的。CSS源码在使用evenodd规则时，我们可以通过从任意一点画一条射线来判断一个点是在边界内还是边界外。如果通过剪切路径线的光线之和为偶数，则认为一个点在外部；如果通过剪切路径线的光线之和为奇数，则认为该点在内部。需要注意的是，有许多CSS属性（例如CSSFilters、BlendModes等）会影响元素的外观。而这些效果会按照以下顺序应用到元素上：CSSFilters（比如filter:blur(2px)）Clipping（本文讲的）Masking（类似于裁剪）BlendModes（比如mix-blend-mode：multiply)Opacity如果我们需要一个模糊的星形，模糊效果发生在裁剪之前。由于模糊效果会参考元素的边框，但是我们裁剪了元素的边框，之前星星的模糊效果会丢失。CSS源代码如果我们想要模糊星星，我们可以选择将被剪裁的元素包裹在模糊的父元素中。内部元素将首先呈现其星形，然后父元素将正常模糊其内容。通过动画显示内容CSSShapes可以进行动画处理，这使得我们可以在不影响元素内容的情况下改变元素的可见区域。例如，我们可以从隐藏内容（完全剪裁）开始，然后增加剪裁路径以显示里面的内容。需要注意的是，clip-path:polygon()动画形状的一个重要条件是每个关键帧的坐标点数量和填充规则必须相同。否则，浏览器将没有足够的信息来插入中间值。CSS源码总结Clippaths为我们提供了一些新的有趣的可能性。同时clip-path属性不会改变元素本身的大小和布局。外部的。获取上述效果的全部源码：
