mask-clip

mask-clip CSS 属性是 CSS 遮罩模块级别 1 规范的一部分，用于设置遮罩绘制区域。它实际上剪切了元素的背景区域，并定义了哪些区域显示在遮罩中： 边框、内边距或内容框。这有点像在照片上加框架，只显示未被框架遮盖的照片部分。只是在这种情况下，我们使用 CSS 盒模型值来设置要剪切的内容。

.element {
  mask-image: url(sun.svg);
  mask-clip: padding-box;
}

这与 background-clip 属性类似，只是它有三个额外的值适用于 SVG 元素。在下面的演示中，您可以使用此属性更改遮罩绘制区域。下面有相同的图像，以便更好地显示遮罩效果，并标记边框和内边距区域。

语法

mask-clip: <geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip

• 初始值： border-box
• 应用于：所有元素。在 SVG 中，它应用于除 <defs> 元素外的容器元素，所有图形元素。
• 继承：否
• 动画类型：离散

值

/* Keyword values */
mask-clip: border-box;
mask-clip: content-box;
mask-clip: fill-box;
mask-clip: margin-box;
mask-clip: padding-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* No clip */
mask-clip: no-clip;

/* Global values */
mask-clip: intial;
mask-clip: inherit;
mask-clip: unset;

• border-box: 绘制的內容被剪切到边框盒。(默认值)
• content-box: 绘制的內容被剪切到內容盒。
• fill-box: 绘制的內容被剪切到对象边界盒。
• margin-box: 绘制的內容被剪切到外边距盒。
• padding-box: 绘制的內容被剪切到内边距盒。
• stroke-box: 绘制的內容被剪切到描边边界盒。
• view-box: 使用最近的 SVG 视窗作为参考盒。如果为创建 SVG 视窗的元素指定了 viewBox 属性
  • 参考盒位于由 viewBox 属性建立的坐标系的原点。
  • 参考盒的尺寸设置为 viewBox 属性的 width 和 height 值。
    
• no-clip: 绘制的內容不会被剪切。
  
• initial: 应用属性的默认设置，即 border-box。
• inherit: 采用父元素的 mask-clip 值。
• unset: 从元素中删除当前的 mask-clip。

笔记

• 对于没有关联 CSS 布局盒的 SVG 元素，值 content-box、padding-box 计算为 fill-box，而 border-box 和 margin-box 计算为 stroke-box。
• 对于具有关联 CSS 布局盒的元素，值 fill-box 计算为 content-box，而 stroke-box 和 view-box 计算为 mask-clip 的初始值，即 border-box。

使用多个值

此属性可以接受逗号分隔的值列表，用于遮罩剪裁，每个值应用于 mask-image 属性中指定的相应遮罩层图像。在以下示例中，第一个值指定第一个图像的遮罩绘制区域，第二个值指定第二个图像的遮罩绘制区域，依此类推。

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-clip: padding-box, border-box, content-box;
}

演示

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	79+	53+	全部	4+	15+

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
全部	全部	全部	全部	59+

更多信息

相关属性