mask-origin

基线 2023 *

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

* 此特性的某些部分可能存在不同级别的支持。

mask-origin CSS 属性用于设置遮罩的原点。该属性决定了遮罩的定位区域：即遮罩图像被定位的区域。HTML 元素的遮罩可以包含在其内容边框盒（border box）、内边距盒（padding box）或内容盒（content box）内，而 SVG 元素（没有相关的 CSS 布局盒）的遮罩可以包含在其填充（fill）、描边（stroke）或视口（view box）内。对于渲染为多个盒子的元素，例如跨多行的 <span> 文本，mask-origin 属性指定 box-decoration-break 属性作用于哪些盒子来确定遮罩的定位区域。

语法

css

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-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;

/* Global values */
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: revert-layer;
mask-origin: unset;

值

mask-origin 属性是一个逗号分隔的 <coord-box> 关键字值列表，包括

content-box: 位置相对于内容盒（content box）。
padding-box: 位置相对于内边距盒（padding box）。
border-box: 位置相对于边框盒（border box）。
fill-box: 位置相对于对象边界框（object bounding box）。
stroke-box: 位置相对于描边边界框（stroke bounding box）。
view-box: 使用最近的 SVG 视口作为参考盒。如果创建 SVG 视口的元素指定了 viewBox 属性，则参考盒将定位在 viewBox 属性建立的坐标系的原点，并且参考盒的尺寸将设置为 viewBox 属性的宽度和高度值。

有三个非标准值是标准 <coord-box> 值的快捷方式：content 是 content-box 的别名，padding 是 padding-box 的别名，border 是 border-box 的别名。

描述

mask-origin 属性与 background-origin 属性非常相似，但它有一组不同的值和不同的初始值。初始值取决于是否存在相关的 CSS 布局盒；如果存在，则默认值为 border-box。相比之下，background-origin 的默认值为 padding-box。

对于没有关联 CSS 布局盒的 SVG 元素，content-box、padding-box 和 border-box（默认值）这三个值会计算为 fill-box，这意味着位置是相对于对象边界框的。对于 HTML 元素，如果设置了与 SVG 相关的 fill-box、stroke-box 或 view-box 值，该值将计算为 border-box。

一个元素可以应用多个遮罩层。层数由 mask-image 属性值中逗号分隔的值的数量决定（即使其中一个或多个值为 none）。逗号分隔的值列表中的每个 mask-origin 值都与一个逗号分隔的 mask-image 值按相同顺序匹配。

如果这两个属性中的值的数量不同，当 mask-origin 的值比 mask-image 多时，任何多余的 mask-origin 值都不会被使用。如果 mask-origin 的值比 mask-image 少，则 mask-origin 的值会重复使用。

对于渲染为单个盒子的元素，此属性指定 mask-image 属性引用的图像的遮罩定位区域——或原点位置。

对于渲染为多个盒子的元素，例如跨多行的内联盒子，mask-origin 属性指定 box-decoration-break 属性作用于哪些盒子来确定遮罩的定位区域。

mask-origin 可能会导致遮罩层图像被裁剪。例如，如果 mask-clip 属性设置为 padding-box，mask-origin 设置为 border-box，mask-position 设置为 top left 边缘，并且该元素有边框，那么遮罩层图像将在左上角边缘被裁剪。

正式定义

初始值	`border-box`
应用于	所有元素；在 SVG 中，它适用于除 `<defs>` 元素外的容器元素以及所有图形元素
继承性	否
计算值	同指定值
动画类型	离散

正式语法

mask-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

示例

比较 content、padding 和 border

此示例演示了基本用法，同时比较了 mask-origin 属性的三个值。

HTML

我们包含了四个 <section> 元素，每个元素包含一个 <div> 元素。

html

<section class="content">
  <div></div>
</section>
<section class="padding">
  <div></div>
</section>
<section class="border">
  <div></div>
</section>
<section class="comparison">
  <div></div>
</section>

CSS

我们对每个 <div> 应用了 border、padding 和 margin。这些为遮罩图像的原点创建了参考点。border 简写属性包含了一个 border-color。我们还包含了一个 background-color。这些为遮罩提供了绿色背景和蓝色边框。最后，我们所有的 <div> 元素都提供了一个 mask-image。

css

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
}
section {
  border: 1px solid black;
}

我们为每个 <div> 赋予了不同的 mask-origin 值。

css

.content div {
  mask-origin: content-box;
}

.padding div {
  mask-origin: padding-box;
}

.border div {
  mask-origin: border-box;
}

.comparison div {
  mask-image: none;
}

我们还在每个 <section> 内部生成了一些文本，以指示每个 <div> 容器的遮罩原点。

css

section::before {
  content: attr(class);
  display: block;
  text-align: center;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

结果

注意这三个值之间的区别。在前三个盒子中，遮罩分别源自

边框的外边缘。
边框的内边缘，也就是内边距盒的外边缘。
内边距的内边缘，也就是内容盒的外边缘。

第四个盒子没有指定 mask-image：它是一个参考图像，用于让你轻松地观察内容和内边距区域的范围。

多个值

此示例演示了如何为应用于单个元素的不同 mask-image 使用不同的 mask-origin 值。

HTML

我们包含了一个 <div>。

html

<div></div>

CSS

我们应用了三个遮罩图像而不是一个，每个图像都有不同的 mask-position。我们还将遮罩图像设置为不重复。

css

div {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image:
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
  mask-position:
    top left,
    top right,
    bottom center;
  mask-repeat: no-repeat;
  mask-origin: content-box, border-box;
}

结果

我们有三个 mask-image 值，但只有两个 mask-origin 值。这意味着 mask-origin 的值会被重复，就好像我们设置了 mask-origin: content-box, padding-box, content-box; 一样。唯一与边框重叠的遮罩是右上方星星，其值为 border-box。

规范

规范
CSS 蒙版模块 Level 1 # the-mask-origin

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 8 月 5 日⁩，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题