mask-origin
这是一种实验技术
由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-originCSS属性确定掩码的来源。
/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;
/* Non-standard keyword values */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;
/* Global values */
mask-origin: inherit;
mask-origin: initial;
mask-origin: unset;
对于呈现为单个框的元素，此属性指定掩码定位区域。换句话说，此属性指定由mask-imageCSS属性。对于呈现为多个框的元素，例如几行内联框或多页框，它指定哪些框。box-decoration-break操作用来确定掩模定位区域。
| Initial value | border-box |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
下面列出的一个或多个关键字值，以逗号分隔。
值
content-box该位置相对于内容框。
形式语法
<geometry-box>#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;
margin: 10px;
border: 10px solid blue;
background-color: #8cffa0;
padding: 10px;
mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg
mask-origin: border-box; /* Can be changed in the live sample */
}
规格
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Module Level 1The definition of 'mask-origin' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes)-webkit1 | 53.0 (53.0) | No support | ? | (Yes)-webkit1 | (Yes)-webkit1 |
| fill-box, stroke-box, view-box | No support | No support | No support | ? | ? | ? |
| content, padding, border | 1.0-webkit | No support | No support | ? | No support | 4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 53.0 (53.0) | ? | ? | ? |
| fill-box, stroke-box, view-box | ? | No support | ? | ? | ? |
| content, padding, border | 2.1-webkit | No support | ? | ? | 3.2-webkit |
