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 属性