css能不能实现剪切蒙版,CSS中图形剪切、遮罩功能-及使用说明

Firefox 54 发布后，本来已经很酷的 CSS 属性，又增添新军：clip-path(裁减路径)。

clip-path 属性能让你裁剪(剪掉)一个元素中的指定区域。过去，你只能用 SVG 裁切元素。

但在 Firefox 54 推出后，你将可绘制出各式各样的 CSS 图形：insets, circles, ellipses 和 polygons！

注意：这篇文章包含许多演示，需要支持clip-path和mask。 为了能够在本文中看到每个演示，并与之交互，您需要使用 Firefox 54 或更高版本。

基本使用

考虑到 clip-path 不接受 “img” 作为一个输入，而是作为 元素：

一件很酷的事情是，这些 元素能包含 SVG 动画：

但是，在新发布的 Firefox 版本中，我们也将拥有CSS形状函数。 这允许我们在样式表中定义形状而无需 SVG 。 我们可以使用的形状函数是：含 circle(圆形)，ellipse(椭圆形)，inset(嵌入) 和 polygon(多边形)。你可以看下面这个例子：

See the Pen oWJBwW by ladybenko (@ladybenko) on CodePen.0

不仅如此，我们还可以使用CSS为它们制作动