剪裁和掩蔽

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)不提供支援。