CSS mask-origin 属性

在 CSS 中，mask-origin 属性用于定义掩码图像的裁剪原点。这个属性通常与 mask-image 和 mask-repeat 属性一起使用，用于创建一个图像遮罩，可以在元素上创建可视区域的遮罩效果。

语法

mask-origin: padding-box | border-box | content-box | margin-box | fill-box | stroke-box | view-box | none;

• padding-box：默认值。掩码从填充区域开始裁剪。
• border-box：掩码从边框区域开始裁剪。
• content-box：掩码从内容区域开始裁剪。
• margin-box：掩码从外边距区域开始裁剪。
• fill-box：掩码从元素的可渲染内容区域填充区域开始裁剪。
• stroke-box：掩码从元素的可渲染内容区域描边区域开始裁剪。
• view-box：掩码从视口区域开始裁剪。
• none：不使用掩码。

示例

.container {
  mask-image: url('mask.png');
  mask-repeat: no-repeat;
  mask-origin: border-box;
}

上述示例代码将创建一个图像遮罩，掩盖 .container 元素中所有的内容，只留下 .container 元素的边框。如果要实现更多的遮罩效果，就可以根据需要在 mask-origin、mask-image 和 mask-repeat 属性中进行组合。