面具剪裁 | mask-clip

这是一种实验技术

由于此技术规范尚未稳定，在各种浏览器中使用之前，请检查兼容性表。还要注意的是，随着规范的改变，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

mask-clipCSS属性确定受掩码影响的区域。元素的绘制内容必须限制在此区域。

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

/* Keyword values */
mask-clip: no-clip;

/* Non-standard keyword values */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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

语法

下面列出的一个或多个关键字值，以逗号分隔。

值

content-box绘制的内容被剪裁到内容框中。

padding-box绘制的内容被裁剪到填充框中。

border-box绘制的内容被裁剪到边框中。

margin-box绘制的内容被裁剪到边距框中。

fill-box绘制的内容被裁剪到对象边界框中。

stroke-box绘制的内容被裁剪到笔画边框。

view-box使用最近的SVG视图作为参考框。如果viewBox属性指定用于创建SVG视口的元素，引用框位于由viewBox属性和引用框的维度设置为viewBox属性。

no-clip绘制的内容没有剪裁。

border此关键字的行为与border-box相同

padding此关键字的行为与padding-box相同

content此关键字的行为与content-box相同

text此关键字将掩码图像剪辑到元素的文本中。

形式语法

[ <geometry-box> | no-clip ]#where 
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where 
<shape-box> = <box> | margin-box
where 
<box> = border-box | padding-box | content-box

例子

CSS内容

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 20px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-size: 100% 100%;
  mask-clip: border-box; /* Can be changed in the live sample */
}

规格

浏览器兼容性