CSS 遮罩

CSS 遮罩 (masking) 模块定义了遮罩 (masking) 和剪裁 (clipping)，这两种不同的图形操作用于部分或完全隐藏视觉元素的某些部分。

剪裁 (Clipping) 涉及将一个闭合的矢量路径、形状或多边形定义为剪裁路径。剪裁路径区域内的所有内容保持可见，而外部的所有内容都被隐藏或“剪裁掉”。clip-path 属性指定一个<basic-shape> 或引用一个 SVG <clipPath> 元素作为剪裁路径。

CSS 遮罩 (masking) 属性用于对元素或其边框应用遮罩。然后，一个图形对象被绘制到背景或边框上，根据遮罩的不透明度或亮度，完全或部分遮盖元素或其边框的部分。

用作遮罩的图像由mask-image 或 mask-border-source 属性指定。指定的遮罩可以是<image>、<gradient> 或 SVG <mask> 元素。遮罩可以像背景和边框图像一样进行尺寸调整和定位。

CSS 中的剪裁和遮罩行为与 SVG 中相同：首先，元素在没有滤镜效果、遮罩、剪裁和不透明度的情况下进行样式设置。然后，按照以下顺序将任何效果应用于元素：滤镜效果、剪裁、遮罩和不透明度。

虽然遮罩提供了更多的控制和选项，但如果只需要一个基本形状，剪裁可以表现得更好——它们更容易进行插值。