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

该【firefox中css图形、剪裁、遮盖功能以及操作说明 】是由【小屁孩】上传分享，文档一共【3】页，该文档可以免费在线阅读，需要了解更多关于【firefox中css图形、剪裁、遮盖功能以及操作说明 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:..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开发者关系团队的工程师和游戏开发者。她关注于网络标准、高质量程序代码、易用性及游戏开发等议题。)