CSS没有边界的裁剪路径

1、css没有边界的裁剪路径在深化讨论之前，我们应当先看看基本的外形和clip-path。裁剪路径可以将css shapes如circle()、ellipse(), inset()或自由变幻的polygon()应用于任何元素。元素中不在外形边界内的任何内容都将被裁剪删除掉。用法多边形函数，我们可以创建三角形、星形或其他外形，虽然在可以用法px等固定单位，但百分比将提供更大的灵便性并自适应于元素的尺寸。所以对于一个八边形，我们可以设置八组x，y点坐标来定义。在这种状况下，对于第一个x，我们从盒子宽度的30%开头，对于y，我们从盒子的顶部开头，然后顺时针设置各个点。可见区域就是通过将这些点用直线衔接而

2、形成的外形。clip-path: polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);看不见的顶点上面实现一个八边形，我们设置了八个点的坐标。但是，我们可以跳出元素框的限制去思量，也就是说要跳出0% - 100%的这个范围。元素的盒边框是裁剪后内容的显示边界，但我们仍然可以为元素定义超出盒边框的点。通过定义超过0%-100%范围的点，我们可以把一个有三个点的多边形变成四边形、五边形或六边形。在这个例子中，都是定义clip-path: polygon()函数的三个点，但是因为超出了元素框的边界，我们可以

3、看到一个三角形和两个五边形。于是，上面的八边形只用四个点就可以实现。一条裁剪路径，多个外形我们可以利用超出元素边界的这种能力用一个polygon()创建多个裁剪外形。按照元素的位置，我们可以挺直制作出每个外形，但是由于我们知道裁剪坐标点可以在元素框之外的空间中移动，所以可以绘制额外的线来协助我们找到下一个点的位置。它还可以协助我们分割元素。结合css自定义属性，我们可以处理重叠的元素，并将每个元素裁剪成交替的条带。下面的例子是两个重叠的圆角矩形，每个被分成不规章的矩形动画。不同的填充规章不同的外形polygon()函数不仅仅是一组坐标点的集合，它还有另外的一个参数 — 填充

4、规章 ，我们向来用法的默认值是nonzero，它还有另外一个值是evenodd，这两个值它们确定外形的内部和外部的规章是不同的。当用法evenodd规章时，我们可以通过从随意的点绘制光芒来确定点是在边界内还是在边界外。假如光芒穿过裁剪路径线的和为偶数，则该点被视为外部，假如光芒穿过裁剪路径线的和为奇数，则该点位于内部。挨次要注重的是，有许多css属性例如css filters, blend modes等都会影响元素的外观。而这些效果会按下面的挨次应用到元素上：css filters (例如 filter: blur(2px)clipping (本文所讲的)masking (类似与裁剪)blen

5、d modes (例如 mix-blend-mode: multiply)opacity假如我们需要一个含糊的星星外形，含糊效果会发生在裁剪之前。因为含糊效果会参照元素的边框，但是我们将元素边框裁剪掉了，于是前一个星星的含糊效果会走失。假如我们想含糊星星，可以挑选将剪裁后的元素小包在含糊的父元素中。内部元素将首先展现其星星的外形，然后父元素将正常含糊其内容。通过动画来显示内容css shapes是可以添加动画效果的，它允许我们在不影响元素内容的状况下转变元素的可视区域。例如，我们可以从内容躲藏（彻低裁剪）开头，并增大裁剪路径以显示其中的内容。要注重的是，clip-path: polygon()动画形的一个重要条件是每个关键帧的坐标点数以及填充规章都必需相同。否则，扫瞄器将没有足够的信息来插入中间值。总结clip paths给我们提供了一