firefox中css图形、剪裁、遮盖功能以及操作说明 Firefox 54 发布后，本来已经相当强大的CSS属性，又增添了新的生力军：clip-path（剪裁路径）。 Clip-path 属性能让你剪裁（剪掉）一个网页元素中的指定区域。过去，你只能用 SVG 裁切元素。但在 Firefox 54 推出后，你将可绘制出各式各样的 CSS 图形：凹陷（inset）、圆圈（circle）、椭圆（ellipse）和多边形（polygon）！ 请注意：本文将示范 CSS 的操作方法，系统需支援 clip-path和 mask。读者的浏览器版本必须不低于 Firefox 54，才能看到和体验所有的范例。 基本用法首先，你必须记得，clip-path不把「图像」当成 input，而是当成的元素： 很酷的是，这些元素能包含 SVG 动画： 通过 Firefox 54，CSS 图形（shape）功能变得唾手可及，我们可运用样式表单来定义图形，所以不再需要 SVG。Firefox 54 支持的图形包括：圆形、椭圆形、内凹和多边形。如下： 除此以外，我们还能用 CSS 把这些图形变成动画。唯一的限制是，不能把不同图形「混合」在一起（如：让圆形变成内凹）；还有，若制作多边形动画，多边形在整个动态过程中都必须保有一样多的角。 下面是用圆形制作的简单动画： 以下是另一个多边形动画。你会发现，虽然我们必须维持一定数量的角，但可以凭借重复数值来把几个角「融合」起来。这让我们创造出把多边形变成任一种边形的假象。 值得一提的是，clip-path还为页面布局创造新的可能性。在下面的范例中，我们运用剪切（clipping）功能改造一个图，让这个多栏布局的文章读起来更赏心悦目： 以 JavaScript 裁剪剪切让我们可以尝试许多新奇的做法。在接下来的例子中，我们用 clip-path 把网站上的一些元素隔离出来，仿真出导览/教学的内容： 这是使用 JavaScript 做出来的结果。做法是：先快速选取一个元素的尺寸（dimensions）后、计算参考容器（container）的距离，然后再把距离值更新到 clip-path 属性所采用的内凹图形上。 我们现在还能根据用户输入的内容来动态调整剪切的区块，如下图是通过操控鼠标所产生的「潜望镜」效果。 该用 clip-path 还是 mask？CSS 还有另一个属性?—?— 屏蔽（mask），虽然和 clip-path 相近，却各有千秋，建议您依据不同的应用情境选择其中之一使用。此外，也请留意：各家浏览器对屏蔽的支持程度不同。目前，Firefox 是唯一全方位支持屏蔽功能的浏览器。因此，你必须使用 Firefox 54，才能充分体验下面这个 Codepen 的范例。 屏蔽可用 SVG 的元素或图片，但 clip-path 则要用 SVG 本文来源：https://www.wddqw.com/doc/6a4f2513bf23482fb4daa58da0116c175f0e1eb0.html