面具剪裁 | mask-clip (Masking) - CSS 中文开发手册
这是一种实验技术
由于此技术规范尚未稳定，在各种浏览器中使用之前，请检查兼容性表。还要注意的是，随着规范的改变，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。
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绘制的内容被剪裁到内容框中。
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 {
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 |