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 上檢視此頁面 • 報告此內容的問題