Firefox 54 的发布指日可待，它将在现有的酷炫 CSS 属性中引入新功能：clip-path。

clip-path 是一种允许我们裁剪（即剪切）元素部分的属性。到目前为止，在 Firefox 中，您只能使用 SVG 来裁剪元素

但是，使用 Firefox 54，您也可以使用形状：内嵌、圆形、椭圆形和多边形！

注意：本文包含许多演示，这些演示需要 支持clip-path 和 mask。要能够查看和交互本文中的每个演示，您需要 Firefox 54 或更高版本。

基本用法

重要的是要考虑到 clip-path 不接受“图像”作为输入，而是作为 <clipPath> 元素

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen clip-path（静态 SVG 遮罩）。

一件很酷的事情是，这些 <clipPath> 元素可以包含 SVG 动画

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen clip-path（动画 SVG）。

但是，随着即将发布的 Firefox 版本，我们也将可以使用 CSS 形状函数。这些允许我们在样式表中定义形状，因此无需 SVG。我们可用的形状函数是：circle、ellipse、inset 和 polygon。您可以在此处查看它们的实际效果

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen oWJBwW。

不仅如此，我们还可以使用 CSS 对它们进行动画处理。唯一的限制是我们不能“混合”函数形状（例如，从 circle 形状变形到 inset 形状），以及在对多边形进行动画处理时，多边形在整个动画过程中必须保留相同数量的顶点。

这是一个使用 circle 形状的简单动画

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen 动画 clip-path。

还有一个使用 polygon 的动画。注意：即使我们受限于保留顶点的数量，我们也可以通过重复值来“合并”它们。这会造成动画到任意数量边的多边形的错觉。

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen 动画 clip-path（多边形）。

请注意，clip-path 还开辟了布局方面的新可能性。以下演示使用裁剪使多栏文章中的图像更有趣

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen 布局示例。

使用 JavaScript 增强趣味性

裁剪开辟了很酷的可能性。在以下示例中，clip-path 已用于隔离网站元素 - 在本例中，模拟游览/教程

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen 使用 clip-path 的游览。

它是使用 JavaScript 实现的，通过动态获取元素的尺寸，并计算相对于参考容器的距离，然后使用该距离来更新 clip-path 属性中使用的内嵌形状。

现在我们还可以根据用户输入动态更改裁剪，例如，在以下示例中，使用鼠标控制“潜望镜”效果

查看 CodePen 上 ladybenko (@ladybenko) 的 Pen clip-path（潜望镜）。

clip-path 还是 mask?

有一个类似的 CSS 属性，mask，但它与 clip-path并不相同。根据您的具体用例，您应该选择其中一个。另外请注意，各浏览器之间的支持情况不同，目前 Firefox 是唯一完全支持所有遮罩功能的浏览器，因此您需要运行 Firefox 54 才能与 CodePen 上的以下演示进行交互。

遮罩可以使用图像或 SVG 中的 <mask> 元素。另一方面，clip-path 使用 SVG 路径或 CSS 形状。

遮罩会修改它遮罩的元素的外观。例如，这里有一个圆形遮罩，它填充了线性渐变

请记住，您也可以使用位图图像，即使它们没有 alpha 通道（即透明度），也可以通过调整 mask-mode 来实现

遮罩的关键概念是它会修改图像的像素，改变它们的值 - 甚至会使其中一些像素完全透明。

另一方面，裁剪会“剪切”元素，这包括它的碰撞面。查看 以下演示，它显示了两张相同的图片，使用相同的十字形状进行遮罩和裁剪。尝试将鼠标悬停在图片上，看看会发生什么。您会注意到，在遮罩的图像中，碰撞区域也包含遮罩的部分。在裁剪的图像中，碰撞区域仅是元素的可见部分（即十字形状）。

那么遮罩优于裁剪，还是反之？不，它们只是用于不同的用途。

我希望这篇文章能让你对 clip-path 感到好奇。查看即将发布的 Firefox 版本试用它吧！