mask-origin

基线 2023

新增功能

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

mask-origin CSS 属性设置蒙版的原点。

对于呈现为单个盒子的元素，此属性指定蒙版定位区域。换句话说，此属性指定由 mask-image CSS 属性指定的图像的原点位置。对于呈现为多个盒子的元素，例如几行上的内联盒子或几个页面上的盒子，它指定 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;

/* 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: revert;
mask-origin: revert-layer;
mask-origin: unset;

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

值

content-box: 位置相对于内容框。
padding-box: 位置相对于填充框。对于单个盒子，0 0 是填充边缘的左上角，100% 100% 是右下角。
border-box: 位置相对于边框框。
fill-box: 位置相对于对象边界框。
stroke-box: 位置相对于描边边界框。
view-box: 使用最近的 SVG 视口作为参考框。如果为创建 SVG 视口的元素指定了 viewBox 属性，则参考框位于由 viewBox 属性建立的坐标系的原点，参考框的尺寸设置为 viewBox 属性的宽度和高度值。
content: 与 content-box 相同。
padding: 与 padding-box 相同。
border: 与 border-box 相同。

正式定义

初始值	`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

示例

将蒙版原点设置为 border-box

通过更新下面框中的 CSS 来尝试其他一些可能的值。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

CSS 中的剪裁和蒙版