请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

Firefox中CSS图形、剪裁、遮盖功能,以及操作说明

yingliu Mozilla员工 发表于 2017-7-19 18:01:34 | 显示全部楼层 [复制链接]
3 3217
本帖最后由 yingliu 于 2017-7-19 18:03 编辑

Firefox 54 发布后,本来已经相当强大的CSS属性,又增添了新的生力军:clip-path(剪裁路径)。

Clip-path 属性能让你剪裁(剪掉)一个网页元素中的指定区域。过去,你只能用 SVG 裁切元素。但在 Firefox 54 推出后,你将可绘制出各式各样的 CSS 图形:凹陷(inset)、圆圈(circle)、椭圆(ellipse)和多边形(polygon)!

请注意:本文将示范 CSS 的操作方法,系统需支援 clip-pathmask。读者的浏览器版本必须不低于 Firefox 54,才能看到和体验所有的范例。

基本用法
首先,你必须记得,clip-path不把「图像」当成 input,而是当成<clipPath>的元素:
1E3cTejEmaV5.png

很酷的是,这些<clipPath>元素能包含 SVG 动画:
2Ut8JSaAhUwC.png
3a20170719162959.jpg

通过 Firefox 54,CSS 图形(shape)功能变得唾手可及,我们可运用样式表单来定义图形,所以不再需要 SVG。Firefox 54 支持的图形包括:圆形、椭圆形、内凹和多边形。如下:
4a20170719162836.jpg
4RGgwc6PG3x.png
5a20170719163038.jpg

除此以外,我们还能用 CSS 把这些图形变成动画。唯一的限制是,不能把不同图形「混合」在一起(如:让圆形变成内凹);还有,若制作多边形动画,多边形在整个动态过程中都必须保有一样多的角。

下面是用圆形制作的简单动画:
6a20170719163114.jpg
6EoIPMr97xcZT.png

以下是另一个多边形动画。你会发现,虽然我们必须维持一定数量的角,但可以凭借重复数值来把几个角「融合」起来。这让我们创造出把多边形变成任一种边形的假象。
7E3tt0JgJFdF.png
8a20170719163127.jpg

值得一提的是,clip-path还为页面布局创造新的可能性。在下面的范例中,我们运用剪切(clipping)功能改造一个图,让这个多栏布局的文章读起来更赏心悦目:
9Da5I4LkLCaD.png

以 JavaScript 裁剪
剪切让我们可以尝试许多新奇的做法。在接下来的例子中,我们用 clip-path 把网站上的一些元素隔离出来,仿真出导览/教学的内容:
10HuZNN6nro.png

这是使用 JavaScript 做出来的结果。做法是:先快速选取一个元素的尺寸(dimensions)后、计算参考容器(container)的距离,然后再把距离值更新到 clip-path 属性所采用的内凹图形上。

我们现在还能根据用户输入的内容来动态调整剪切的区块,如下图是通过操控鼠标所产生的「潜望镜」效果。
11Bvq3jxWcnI.png
12a20170719163143.jpg
13a20170719163157.jpg

该用 clip-path 还是 mask?
CSS 还有另一个属性 — — 屏蔽(mask),虽然和 clip-path 相近,却各有千秋,建议您依据不同的应用情境选择其中之一使用。此外,也请留意:各家浏览器对屏蔽的支持程度不同。目前,Firefox 是唯一全方位支持屏蔽功能的浏览器。因此,你必须使用 Firefox 54,才能充分体验下面这个 Codepen 的范例。

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

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

别忘了,就算图片没有 alphachannel(也就是透明度),也能通过调整屏蔽模式,达成位图的效果
15zg61vtVv4R.png

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

另一方面,剪切则是直接「修剪」元素,元素的碰撞(collision)面也可以裁切掉。下面的范例把两个一模一样的图,以相同的十字形分别进行屏蔽和剪切。你可以把鼠标挪到两个图上试试。你会发现,屏蔽图(左图)内的碰撞区仍含有被遮住的部分。剪切图(右图)中的碰撞区则仅留下该元素的可视区块(即十字图形)。
16firefox-mask-vs-clip.gif

屏蔽比剪切更好用吗?还是剪切更强大呢?都不是。两者之间没有哪个更好,只是各有不同用途罢了。

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

(本文作者 Belén Albeza 是 Mozilla 开发者关系团队的工程师和游戏开发者。她关注于网络标准、高质量程序代码、易用性及游戏开发等议题。)



隐元 老狐狸
发表于 2017-7-19 21:20:32 | 显示全部楼层
mozilla总能给人带来惊喜!
310971373 狐狸精
发表于 2017-7-20 23:06:38 | 显示全部楼层
调试神器哦,支持支持~~
d调的桦骊 社区新人
发表于 2017-7-24 09:03:11 | 显示全部楼层
前排支持
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
热门活动更多 »
火狐微信
快速回复 返回顶部 返回列表