面具剪裁 | mask-clip

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;

初始值	border-box
适用于	所有元素; 在SVG中，它适用于不包含<defs>元素和所有图形元素的容器元素
继承	没有
媒体	视觉
计算值	作为指定
动画类型	discrete
规范的顺序	形式语法定义的独特的非模糊顺序

语法

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

值

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

形式语法

[ <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 */
}

规格

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-clip' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit	53.0 (53.0)	No support	(Yes)-webkit	(Yes)-webkit
border, padding, content, text	1.0-webkit	?	No support	(Yes)	4.0-webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	53.0 (53.0)	No support	?	?
border, padding, content, text	2.1-webkit	?	No support	?	3.2-webkit