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

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 支持的图形包括：圆形、椭圆形、内凹和多边形。如下：除此以外，我们还能用 CSS 把这些图形变成动画。唯一的限制是，不能把不同图形「混合」在一起（如：让圆形变成内凹）；还有，若制作多边形动画，多边形在整个动态过程中都必须保有一样多的角。 下面是用圆形制作的简单动