firefox中css图形、剪裁、遮盖功能以及操作说明.pdf

firefox中css图形、剪裁、遮盖功能以及操作说明

Firefox54发布后，本来已经相当强大的CSS属性，又增添了新的生力军：clip-path

（剪裁路径）。

Clip-path属性能让你剪裁（剪掉）一个网页元素中的指定区域。过去，你只能用SVG

裁切元素。但在Firefox54推出后，你将可绘制出各式各样的CSS图形：凹陷（inset）、

圆圈（circle）、椭圆（ellipse）和多边形（polygon）！

请注意：本文将示范CSS的操作方法，系统需支援clip-path和mask。读者的浏

览器版本必须不低于Firefox54，才能看到和体验所有的范例。

基本用法首先，你必须记得，clip-path不把「图像」当成input，而是当成的元素：

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

通过Firefox54，CSS图形（shape）功能变得唾手可及，我们可运用样式表单来定

义图形，所以不再需要SVG。Firefox54支持的图形包括：圆形、椭圆形、内凹和多边形。

如下：

除此以外，我们还能用CSS把这些图形变成动画。唯一的限制是，不能把不同图形

「混合」在一起（如：让圆形变成内凹）；还有，若制作多边形动画，多边形在整个动态过

程中都必须保有一样多的角。

下面是用圆形制作的简单动画：

以下是另一个多边形动画。你会发现，虽然我们必须维持一定数量的角，但可以凭借

重复数值来把几个角「融合」起来。这让我们创造出把多边形变成任一种边形的假象。

值得一提的是，clip-path还为页面布局创造新的可能性。在下面的范例中，我们运用

剪切（clipping）功能改造一个图，让这个多栏布局的文章读起来更赏心悦目：

以JavaScript裁剪剪切让我们可以尝试许多新奇的做法。在接下来的例子中，我们

用clip-path把网站上的一些元素隔离出来，仿真出导览/教学的内容：

这是使用JavaScript做出来的结果。做法是：先快速选取一个元素的尺寸

（dimensions）后、计算参考容器（container）的距离，然后再把距离值更新到clip-path

属性所采用的内凹图形上。

我们现在还能根据用户输入的内容来动态调整剪切的区块，如下图是通过操控鼠标所

产生的「潜望镜」效果。

该用clip-path还是mask？CSS还有另一个属性?—?—屏蔽（mask），虽然和

clip-path相近，却各有千秋，建议您依据不同的应用情境选择其中之一使用。此外，也

请留意：各家浏览器对屏蔽的支持程度不同。目前，Firefox是唯一全方位支持屏蔽功能

的浏览器。因此，你必须使用Firefox54，才能充分体验下面这个Codepen的范例。

屏蔽可用SVG的元素或图片，但clip-path则要用SVG路径或CSS图形。

屏蔽会修饰被遮住元素的外观。譬如，下图是一个被线性渐层填满的圆形屏蔽。

别忘了，就算图片没有alphachannel（也就是透明度），也能通过调整屏蔽模式，达

成位图的效果。

屏蔽的关键概念是通过调整图片像素的数值，把图片上的一些区块变成完全透明。

另一方面，剪切则是直接「修剪」元素，元素的碰撞（collision）面也可以裁切掉。

下面的范例把两个一模一样的图，以相同的十字形分别进行屏蔽和剪切。你可以把鼠标挪

到两个图上试试。你会发现，屏蔽图（左图）内的碰撞区仍含有被遮住的部分。剪切图（右

图）中的碰撞区则仅留下该元素的可视区块（即十字图形）。

屏蔽比剪切更好用吗？还是剪切更强大呢？都不是。两者之间没有哪个更好，只是各

有不同用途罢了。

希望本文激起了您对clip-path的兴趣。您可在Firefox54尝试这项CSS的新属

性！

（本文作者BelénAlbeza是Mozilla开发者关系团队的工程师和游戏开发者。她关

注于网络标准、高质量程序代码、易用性及游戏开发等议题。）