CSS mask-origin 屬性

定義和用法

mask-origin 屬性指定遮罩層圖像的原始位置（即遮罩位置區域）。

實例

展示 mask-origin 屬性的不同值：

.masked {
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

親自試一試

CSS 語法

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

屬性值

值 描述
border-box 位置相對于邊框盒。默認值。
content-box 位置相對于內容盒。
padding-box 位置相對于內邊框盒。
fill-box 位置相對于對象邊界盒。
stroke-box 位置相對于描邊邊界盒。
view-box 使用最近的 SVG 視口作為參考框。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： border-box
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 1
JavaScript 語法： object.style.maskOrigin="padding-box"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相關頁面

教程：CSS 遮罩

參考：CSS mask 屬性

參考：CSS mask-clip 屬性

參考：CSS mask-composite 屬性

參考：CSS mask-image 屬性

參考：CSS mask-mode 屬性

參考：CSS mask-position 屬性

參考：CSS mask-repeat 屬性

參考：CSS mask-size 屬性

參考：CSS mask-type 屬性