剪裁和掩蔽

CSS Clipping 和 Masking 是非常新的概念,因此浏览器对这些属性的支持非常低。

面具:

截至撰写本文时(2016 年 7 月),Chrome,Safari 和 Opera 使用 -webkit- 前缀支持这些属性。

Firefox 不需要前缀,但只有在与 SVG mask 元素一起使用时才支持掩码。对于内联 SVG mask 元素,语法为 mask: url(#msk),而对于在外部 SVG 文件中使用 mask 元素,语法为 mask: url('yourfilepath/yourfilename.svg#msk')。两种情况下的 #msk 都是指被引用的 mask 元素的 id。如本回答所示 ,目前 Firefox 在 mask 属性中不支持 mask-reference 以外的任何参数。

Internet Explorer(和 Edge)目前尚未对此属性提供任何支持。

任何带或不带前缀的浏览器目前都不支持 mask-mode 属性。

夹路径:

截至撰写时(2016 年 7 月),当使用基本形状(如 circlepolygon)或带有内联 SVG 的 url(#clipper) 语法创建路径时,Chrome,Safari 和 Opera 支持 clip-path。它们不支持基于外部 SVG 文件一部分的形状进行裁剪。此外,它们还需要 -webkit 前缀。

Firefox 仅支持 clip-pathurl() 语法,而 Internet Explorer(和 Edge)不提供支持。