clip-path

首先，我要在此声明，这个属性的兼容性很差，因此本节是为了以后所准备的。暂时请不要使用该方法。

兼容性

好了，接下去我们就开始讲吧。

clip-path 属性用于指定要用作元素上的剪切路径的基本形状（）或引用 SVG 路径（）。

元素可以是 HTML 元素或 SVG 元素。

首先，我们来看两个概念：

什么是“剪切”（clipping）？
剪切是一种图形操作，允许您完全或部分隐藏元素的某些部分。显示或隐藏的元素的部分由剪切路径确定。

接着是：

什么是剪切路径（clipping path）和区域（region）？
剪切路径可以是基本形状或向量路径。此路径定义一个区域（在没有反锯齿的情况下），其中允许该区域的“内部”上的所有东西通过，但是外部的一切都被“剪切出”，并且不出现在画布上。该区域被称为剪切区域。

就是下图所示的这样：

剪切路径与区域

简而言之，剪切路径可以从一个形状动画到另一个，因为它由点组成。这些点具有长度或百分比值的坐标。并且由于长度和百分比是可动的，所以形状也可以是动画的。 所以，基本上，你是动画的点的位置组成一个形状。

在 clip-path 属性被引入之前，在 CSS 2.1 中，clip 属性用于剪辑元素的一部分，类似于 clip-path 的工作方式。但是，剪辑属性非常有限：唯一支持的剪裁形状是使用 rect()函数创建的矩形形状。

此外，剪辑只工作在绝对定位的元素，这限制了它的使用很多。 即使在 SVG 中，它也限于特定的元素。

clip-path 属性是 CSS Shapes 属性的一个很好的伴侣，特别是 shape-outside 属性。

使用 shape-outside 可以改变内容在元素周围流动的方式，因为使用 shape-outside 应用的形状会更改元素的浮动区域的几何。但是，形状不会改变元素的任何其他内容，如背景和边框等。这意味着任何边框和背景图像将不适应元素上创建的形状。因此，即使元素的浮动区域改变，元素周围的内容可能最终位于元素的背景图像之上。

使用 shape-outside 属性更改元素的浮动区域的结果的示例。元素的背景区域保持不变，导致文本重叠，从而得到不需要的结果。

如下图这样：

为了“剪切”元素的背景以匹配定义的形状，可以使用 clip-path 属性。所有你需要做的是将在 shape-outside 属性中使用的相同的形状函数传递给 clip-path 属性，然后元素的背景图像将被剪切到定义的形状，从而产生更加定义的形状。

这才是我们所需要的效果：

我们来看看它的参数：

clip-path: | [ || ] | none
=
=

我们来解释下其中的参数：

• 是使用基本形状函数创建的形状。

• 可以是一个 或三个关键字之一：fill，stroke，view-box。
• 定义使用形状函数创建的 的参考框。它可以是以下值之一：margin-box，border-box，padding-box，content-box。这些框应用并可以在 HTML 元素上使用。

其他三个几何框值应用于 SVG 元素。 SVG 元素没有框模型，因此 值对它们没有影响。事实上， 值将解析为 fill 值。
另一方面，当在 HTML 元素上使用 SVG 几何框值时，它将解析为 border-box。

最终，我们就可以实现自定义的图形填充模式了：

当然，我想说的是。。。这个属性的学习成本不低。所以，我其实不建议使用这个属性的。我们可以在网上使用类似的工具就可以完成我们要的路径的截图，然后将其作为图片加载到我们的容器中就可以了。

所以，本节内容更多的是介绍这个属性，而不是教大家如何使用它。如果真的感兴趣，不妨等着浏览器兼容性更好的时候再回头学习也不迟。