mask-origin

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操作用来确定掩模定位区域。

语法

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

值

content-box该位置相对于内容框。

padding-box该位置相对于填充框。单盒0 0是填充边的左上角，100% 100%右下角。

border-box该位置相对于边框。

margin-box这个位置相对于边距框。

fill-box该位置相对于对象边界框。

stroke-box该位置相对于笔划边界框。

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

content 等价于 content-box.

padding等价于padding-box.

border等价于border-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 */
}

规格

浏览器兼容性