CSS 遮罩模块 第 1 级

1. 简介

本节非规范性内容。

本规范定义了两种不同的图形操作，它们都可以完全或部分隐藏对象的一部分：剪裁和遮罩。

1.1. 剪裁

一个封闭的矢量路径、形状或多边形定义了所谓的剪裁路径。在没有抗锯齿的情况下，该剪裁路径是一个区域，该区域的“内部”部分可以显示出来，而“外部”部分被“剪裁”掉，不会显示在画布上。

一个剪裁路径（中间）应用于一个用不同颜色填充的多边形（左）。结果是一个“被剪裁出”的形状（右）。

clip-path 属性可以使用指定的基本形状作为剪裁路径，或者引用带有clipPath 元素的图形元素作为剪裁路径。

1.2. 遮罩

对图形对象应用遮罩的效果就像是图形对象通过遮罩绘制在背景上，从而完全或部分遮罩掉图形对象的某些部分。

一个亮度遮罩（中间）应用于一个填充有渐变的形状（左）。结果是一个被遮罩的形状（右）。

遮罩通过 mask-image 或 mask-border-source 属性来应用。

mask-image 属性可以引用 mask 元素。mask 元素的内容作为遮罩。

或者，对于许多简单的用法，mask-image 属性可以直接引用图像作为遮罩，而无需显式的 mask 元素。此遮罩可以像 CSS 背景图像一样进行尺寸和定位，通过 mask-position，mask-size 和其他特性进行定义。

mask-border-source 属性将遮罩分为 9 个部分。可以通过不同方式切片、缩放和拉伸这些部分以适应 遮罩边框图像区域的大小。mask-border 属性作为 mask-border-source 和其他特性的速记属性。

mask 属性作为所有mask-border和 mask-image 相关属性的速记属性。

注意：虽然遮罩提供了许多增强图形效果的可能性，且通常对内容的“可见部分”提供了更多控制，但剪裁路径的性能表现更好，而且基本形状更易于插值。

2. 模块交互

本规范定义了一组 CSS 属性，这些属性会影响应用这些属性的元素的视觉呈现。这些效果是在根据 视觉格式化模型 (来自 [CSS21]) 对元素进行大小调整和定位之后应用的。这些属性的某些值会创建一个 堆叠上下文。此外，本规范替换了来自 [CSS21] 的 剪裁: clip 属性部分。

合成模型遵循 SVG 合成模型 [SVG11]：首先在没有滤镜效果、遮罩、剪裁和不透明度的情况下为元素设置样式。然后将元素及其子代绘制到临时画布上。最后，按照顺序将以下效果应用于元素：滤镜效果 [FILTER-EFFECTS]、剪裁、遮罩和不透明度。

本规范允许使用 CSS 合成和混合中的 Porter Duff 合成运算符来合成多个遮罩层 [COMPOSITING-1]。

术语 对象边界框 遵循 SVG 1.1 中的定义 [SVG11]。

3. 值

本规范遵循 CSS 属性定义惯例 (来自 [CSS21])。基本形状定义于 CSS 形状模块第 1 级 [CSS-SHAPES] 中。本规范未定义的值类型在 CSS 值和单位模块第 3 级中定义 [CSS3VAL]。

除了在定义中列出的特定于属性的值外，本规范定义的所有属性还接受 CSS 通用关键字，例如 inherit 作为其属性值 [CSS3VAL]。为了提高可读性，未在此明确重复。

4. 术语

本规范中的 CSS 属性和值的定义类似于 CSS 背景和边框中的定义 [CSS3BG]。为了避免冗余，本规范依赖于 CSS 背景和边框的描述和定义。以下术语在 CSS 背景和边框中的含义在本规范中具有以下意义：

5. 剪裁路径

剪裁路径限制了可以应用绘制的区域，所谓的剪裁区域。从概念上讲，任何位于该区域之外的绘图部分都不会被绘制。这包括应用了剪裁路径的元素及其子元素的内容、背景、边框、文本装饰、轮廓和可见的滚动机制。

元素的祖先也可以剪裁其内容的部分（例如，通过他们自己的 clip 或 clip-path 属性，和/或如果他们的 overflow 属性不是 visible）。渲染的是累积的交集部分。

如果剪裁区域超出 UA 的文档窗口边界，内容可能会被本机操作环境剪裁到该窗口。

剪裁路径影响元素的渲染。它不会影响元素的固有几何形状。被剪裁的元素（即通过 clipPath 元素或其子元素引用 clip-path 属性）必须保持与未剪裁时相同的几何形状。

<g clip-path="circle()"> 
  <path id="shape" d="M0,0 L10,10, L 20,0 z"/> 
</g> 

<use xlink:href="#shape"/> 

默认情况下，pointer-events 不会在形状的被剪裁（不可见）区域触发。例如，一个尺寸为 10px x 10px 的元素被剪裁为半径为 5px 的圆形时，将不会在 剪裁区域外接收 点击事件。

5.1. 剪裁形状: clip-path 属性

指定一个基本形状或引用 clipPath 元素以创建一个 剪裁路径。

<clip-source> = <url>

<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

对于没有关联 CSS 布局框的 SVG 元素，使用值为 content-box 和 padding-box 为 fill-box，border-box 和 margin-box 为 stroke-box。

对于有关联 CSS 布局框的元素，使用值为 fill-box，content-box，stroke-box 和 view-box 为 border-box。

计算值为 none 以外的值将创建一个 堆叠上下文，与 CSS opacity 属性的 1 以外的值相同 [CSS3COLOR]。

如果 URI 引用无效（例如，指向不存在的对象或该对象不是 clipPath 元素），则不会应用剪裁。

clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px, 
        122px 57px, 184px 73px, 198px 105px, 199px 150px, 
        145px 159px, 155px 139px, 126px 120px, 112px 138px, 
        80px 128px, 39px 126px, 24px 104px); 

clip-path: url("#clip1"); 

<clipPath id="clip1"> 
    <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105 
        199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/> 
</clipPath> 

clip-path 属性是 SVG 元素的 呈现属性。

6. SVG 剪裁路径源

6.1. clipPath 元素

属性定义：

clipPathUnits = "userSpaceOnUse | objectBoundingBox"

定义 clipPath 内容的坐标系。

userSpaceOnUse

clipPath 的内容表示在引用 clipPath 元素时生效的当前用户坐标系中的值（即，通过 clip-path 属性引用 clipPath 元素的元素所使用的 用户坐标系）。

objectBoundingBox

坐标系的原点位于应用裁剪路径的元素的边界框左上角，并具有与该边界 框相同的宽度和高度。用户坐标 的尺寸等同于 CSS px 单位。

如果未指定属性 clipPathUnits，则 其效果等同于指定值 userSpaceOnUse。

可动画：是。

CSS 属性会从祖先元素继承到 clipPath 元素；但不会从引用 clipPath 元素的元素继承。

clipPath 元素不会直接呈现；它们只能通过 clip-path 属性进行引用。display 属性不适用于 clipPath 元素；因此，即使 clipPath 元素的 display 属性设置为非 none，clipPath 元素仍不会直接呈现，并且当 display 属性设置为 none 时，clipPath 元素仍然可被引用。

一个 clipPath 元素可以包含 path 元素，text 元素，基本形状（如 circle），或者 use 元素。如果 use 元素是 clipPath 元素的子元素，它必须直接引用 path，text 或 基本形状 元素。间接引用是错误的，clipPath 元素必须被忽略。

Firefox 禁止渲染引用违反内容模型的剪裁路径的元素。没有浏览器会忽略带有间接引用的剪裁路径的使用。<https://github.com/w3c/csswg-drafts/issues/17>

每个子元素的原始几何形状（不包括诸如 填充，描边， 描边宽度等渲染属性）在 clipPath 内部概念上定义了一个 1-bit 的遮罩（可能包含沿几何形状边缘的抗锯齿），该遮罩表示与该元素关联的图形的轮廓。遮罩外部的所有内容都会被遮挡。如果子元素因 display 或 visibility 变得不可见，则它不会影响剪裁路径。如果 clipPath 元素包含多个子元素，子元素的轮廓会被逻辑 "OR" 操作合并为一个轮廓，然后用于限制可以应用涂料的区域。因此，如果某个点位于 clipPath 的任意子元素内，该点就位于剪裁路径内部。

定义与 CSS 属性相关的原始几何形状，特别是文本上的几何形状。<https://github.com/w3c/csswg-drafts/issues/170>

对于给定的 图形元素，实际使用的剪裁路径将是由其 clip-path 属性（如果有）指定的剪裁路径与其祖先上的任何剪裁路径的交集，如通过新视口建立的元素上的 clip-path 属性指定的剪裁路径。（参见 [SVG11]）

有几点补充说明：

• clipPath 元素本身及其子元素 不会继承来自 clipPath 元素祖先的裁剪路径。

• clipPath 元素或其任何子元素都可以指定 clip-path 属性。
  如果在 clipPath 元素上放置一个有效的 clip-path 引用，则生成的裁剪路径是 clipPath 元素内容 与所引用裁剪路径的交集。
  如果在 clipPath 元素的某个子元素上放置一个有效的 clip-path 引用，则给定子元素会先被 所引用的裁剪路径裁剪，然后再将该子元素的轮廓与其他子元素的 轮廓进行 OR 运算。

• 空裁剪路径会完全裁掉应用了 clip-path 属性的元素。

6.2. 绕组规则: clip-rule 属性

clip-rule 属性表示用于确定是否某个给定点在由 剪裁区域（由 图形元素 创建）内的算法。算法定义和 clip-rule 的值参照 fill-rule 属性的定义。详见 SVG 1.1 中的 “填充属性”部分 [SVG11]。

nonzero

详见 fill-rule 属性的描述 [SVG11]。

evenodd

详见 fill-rule 属性的描述 [SVG11]。

属性 clip-rule 仅适用于包含在 图形元素 内的 clipPath 元素。

注意: clip-rule 属性不适用于 <basic-shape>。

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

<g clip-rule="nonzero">
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

clip-rule 属性是 SVG 元素的 表示属性。

7. 定位蒙版

7.1. 蒙版图片来源: mask-image 属性

此属性设置元素的 蒙版层图像。定义如下：

<mask-reference> = none | <image> | <mask-source>

<mask-source> = <url>

<url>

一个 URL 引用指向 mask 元素（例如 url(commonmasks.svg#mask)）或指向 CSS 图像。

none

值为 none 时，计为透明的黑色图像层。

计算值不为 none 时，结果将创建一个 层叠上下文 [CSS21]，其方式与 CSS opacity 处理非 1 值时的行为相同。

蒙版引用为空图像（宽度或高度为零）、下载失败、不是对 mask 元素的引用、或不存在或无法显示（例如由于不支持的图像格式）时，仍计为透明的黑色图像层。

有关如何处理 蒙版层图像，请参见 “蒙版处理” 一节。

注意: 在 <mask-reference> 列表中，值为 none 可能会根据 mask-composite 指定的合成运算符影响蒙版操作。

注意: <mask-source> 计为蒙版层，并且可以在可重复的 <mask-reference> 列表中与 <image> 或进一步的 <mask-source> 列表项结合使用。

注意: 元素还可以使用 mask-border-source 进行蒙版。请参阅 mask-border-source 与 mask-image 之间的交互。

body { mask-image: linear-gradient(black 0%, transparent 100%) } 
p { mask-image: none } 
div { mask-image: url(resources.svg#mask2) } 

有关 mask-image 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层的内容，请参阅 “分层多个蒙版层图像”。

7.2. 蒙版图片解释: mask-mode 属性

mask-mode 属性指示 <mask-reference> 是作为亮度蒙版还是透明度蒙版处理。 (参见 蒙版处理。)

<masking-mode> = alpha | luminance | match-source

值具有以下含义：

alpha

值 alpha 表示使用 蒙版层图像 的透明度值作为蒙版值。 参见 计算蒙版值。

luminance

值 luminance 表示使用 蒙版层图像 的亮度值作为蒙版值。 参见 计算蒙版值。

match-source

如果 <mask-reference> 的 mask-image 属性的类型为 <mask-source>，则应使用引用的 mask 元素的 mask-type 属性指定的值。

如果 <mask-reference> 的 mask-image 属性的类型为 <image>，则应使用 蒙版层图像 的透明度值作为蒙版值。

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"> 
  <radialGradient id="radialFill"> 
    <stop stop-color="white" offset="0"/> 
    <stop stop-color="black" offset="1"/> 
  </radialGradient> 
  <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/> 
</mask> 

<style> 
  rect { 
    mask-image: url(#SVGMask); 
    mask-mode: luminance; 
  } 
</style> 

<rect width="200" height="200" fill="green"/> 

参见 “分层多个蒙版层图像” 以了解 mask-mode 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.3. 平铺蒙版图片: mask-repeat 属性

指定在 蒙版层图像 调整大小 和 定位 后如何平铺。

参见 background-repeat 属性 [CSS3BG] 了解属性值的定义。

body { 
    background-color: blue; 
    mask-image: url(dot-mask.png) luminance; 
    mask-repeat: space; 
} 

参见 “分层多个蒙版层图像” 以了解 mask-repeat 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.4. 定位蒙版图片: mask-position 属性

参见 background-position 属性 [CSS3BG] 了解属性值的定义。

body { 
    mask-image: url("logo.png"); 
    mask-position: 100% 100%; 
    mask-repeat: no-repeat; 
} 

mask-position: right 3em bottom 10px

参见 “分层多个蒙版层图像” 以了解 mask-position 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.5. 蒙版区域: mask-clip 属性

对于不引用 mask 元素的遮罩层图像， mask-clip 确定遮罩绘制区域， 该区域决定受遮罩影响的范围。元素的已绘制内容必须限制 在此区域内。

mask-clip 属性对引用 mask 元素的遮罩层图像没有影响。mask 元素上的 x、 y、 width、height 和 maskUnits 属性决定遮罩引用的遮罩绘制区域。

值的含义如下：

content-box

绘制的内容被限制在 内容框内。

padding-box

绘制的内容被限制在 内边距框内。

border-box

绘制的内容被限制在 边框框内。

fill-box

绘制的内容被限制在 对象边界框内。

stroke-box

绘制的内容被限制在 描边边界框内。

view-box

使用最近的 SVG 视口作为参考框。

如果为创建 SVG 视口的元素指定了 viewBox 属性：

• 参考框定位在 viewBox 属性建立的坐标系的原点处。

• 参考框的尺寸设置为 viewBox 属性的 宽度 和 高度 值。

no-clip

绘制的内容不受限制（不裁剪）。

对于没有关联 CSS 布局框的 SVG 元素，使用值为 content-box 和 padding-box 会计算为 fill-box；border-box 和 margin-box 会计算为 stroke-box。

对于具有关联 CSS 布局框的元素，使用值为 fill-box 会计算为 content-box；stroke-box 和 view-box 会计算为 border-box。

参见 “分层多个蒙版层图像” 以了解 mask-clip 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.6. 定位区域: mask-origin 属性

对于渲染为单个框的元素，指定 蒙版定位区域。对于渲染为多个框的元素（例如，跨多行的内联框，跨多个页面的框），指定哪些框 box-decoration-break 操作以确定蒙版定位区域。

对于没有关联 CSS 布局框的 SVG 元素，content-box、padding-box 和 border-box 的值计算为 fill-box。

对于具有关联 CSS 布局框的元素，fill-box、stroke-box 和 view-box 的值计算为 mask-origin 的初始值。

注意: mask-origin 属性类似于 background-origin 属性 [CSS3BG]，但它有一组不同的值，并且具有不同的初始值。

注意: 如果 mask-clip 是 padding-box，mask-origin 是 border-box，mask-position 是 top left（初始值），并且元素有非零边框，则 蒙版层图像的顶部和左侧将被裁剪。

参见 “分层多个蒙版层图像” 以了解 mask-origin 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.7. 调整蒙版图像大小: mask-size 属性

指定 蒙版层图像的大小。

参见 background-size 属性 [CSS3BG] 以了解属性值的定义。

参见 “分层多个蒙版层图像” 以了解 mask-size 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.8. 合成蒙版层: mask-composite 属性

<compositing-operator> = add | subtract | intersect | exclude

每个关键字代表一个 Porter-Duff 合成运算符 [COMPOSITING-1]，定义了当前蒙版层与其下蒙版层之间的合成操作。

在下文中，当前蒙版层称为 源，其下所有蒙版层（应用了相应的合成操作符）称为 目标。

如果没有进一步的蒙版层，必须忽略合成运算符。蒙版层不应与元素的内容或元素背后的内容进行合成，而应当仿佛它们在一个隔离的组中被渲染。

在应用当前蒙版层的合成操作之前，必须先对当前蒙版层下的所有蒙版层进行合成。

这个例子使用了两个 蒙版层图像：circle.svg 和 rect.svg。

两个 蒙版层图像通过 mask-image 属性进行引用:

mask-image: circle.svg, rect.svg;

含有 rect.svg 的蒙版层位于含有 circle.svg 的蒙版层下方。这意味着 circle.svg 比 rect.svg 离用户更近。

通过 mask-composite 属性，作者可以选择不同的方式来组合多个蒙版层。

• add 将 circle.svg 绘制在 rect.svg 之上。行为描述为合成运算符 源叠加。

  mask-composite: add;

  

• subtract 绘制 circle.svg 中与 rect.svg 不重叠的部分。行为描述为合成运算符 源外。

  mask-composite: subtract;

  

• intersect 绘制与 rect.svg 重叠的 circle.svg 部分。行为描述为合成运算符 源内。

  mask-composite: intersect;

  

• exclude 绘制 circle.svg 和 rect.svg 不重叠的部分。行为描述为合成运算符 XOR。

  mask-composite: exclude;

  

mask-image: rect.svg, circle.svg;
mask-composite: add, exclude;

这是一个具有不同合成运算符的三个蒙版层的例子。

mask-image: trapeze.svg, circle.svg, rect.svg;
mask-composite: subtract, add;

首先，circle.svg 被“添加”到 rect.svg 上。在第二步中，只可见 trapeze.svg 未与前两层合成结果重叠的部分。

参见 “分层多个蒙版层图像” 了解 mask-composite 如何与其他逗号分隔的蒙版属性交互以形成每个蒙版层。

7.9. 蒙版简写: mask 属性

<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

如果存在一个 <geometry-box> 值和 no-clip 关键字，则 <geometry-box> 将 mask-origin 设置为该值，而 no-clip 将 mask-clip 设置为该值。

如果存在一个 <geometry-box> 值且不存在 no-clip 关键字，则 <geometry-box> 会将 mask-origin 和 mask-clip 都设置为该值。

如果存在两个 <geometry-box> 值，则第一个设置 mask-origin，第二个设置 mask-clip。

如果 <mask-reference> 引用了一个 mask 元素，则属性 mask-repeat、mask-position、mask-clip、mask-origin 和 mask-size 的使用值必须不起作用。在这种情况下，该元素 定义遮罩层图像的位置、尺寸和裁剪。

mask 简写属性还会将 mask-border 重置为其初始值。因此建议 作者使用 mask 简写属性，而不是其他 简写属性或单独的属性，来覆盖层叠中较早的任何遮罩设置。这将 确保 mask-border 也已被重置， 从而允许新样式生效。

7.10. 蒙版图像渲染模型

当 mask-image 属性的值不是 none 时，应用该属性的元素（使用 CSS 盒模型格式化）将以与 CSS opacity [CSS3COLOR] 相同的方式建立 层叠上下文，并将该元素的所有后代作为一个组进行渲染，并对整个组应用蒙版。

mask-image 属性不会影响任何元素的 CSS 盒子的几何形状或点击测试。

mask 属性是 SVG 元素的 展示属性。

7.10.1. 蒙版处理

在以下章节中，遮罩 图像是指遮罩层图像或遮罩边框图像。

在计算将与目标 alpha 值相乘的遮罩值时，可以使用两种不同方法之一来解释遮罩图像。

第一种也是最简单的遮罩值计算方法是使用遮罩图像的 alpha 通道。在这种情况下，给定点的遮罩 值就是该点的 alpha 通道值。颜色通道不会 影响遮罩值。

第二种遮罩值计算方法是使用遮罩图像的亮度。在这种情况下， 给定点的遮罩值使用颜色通道值和 alpha 通道值按 以下过程计算。

1. 根据颜色通道值计算亮度值。

   • 如果 mask 元素上的 color-interpolation 计算值为 linearRGB，则将 原始图像颜色值（可能位于 sRGB 色彩空间中）转换到 linearRGB 色彩 空间。

   • 然后，使用非预乘的 RGB 颜色值，应用亮度到 alpha 的系数（如 feColorMatrix 滤镜图元 [SVG11] 中所定义）将 RGB 颜色 值转换为亮度值。

2. 将计算出的亮度值乘以对应的 alpha 值，以生成遮罩值。

无论使用哪种方法，计算遮罩值的过程都假定遮罩的内容是一个 四通道 RGBA 图形对象。对于其他类型的图形对象，需要按 以下方式进行特殊处理。

对于在遮罩中使用的三通道 RGB 图形对象（例如，引用三通道图像 文件时），其效果就像该对象被转换为四通道 RGBA 图像，并将 alpha 通道 统一设置为 1。

对于在遮罩中使用的单通道图像（例如，引用单通道灰度图像 文件时），其效果就像该对象被转换为四通道 RGBA 图像，其中引用对象的单个 通道用于计算三个颜色通道，而 alpha 通道 统一设置为 1。

注：引用灰度图像文件时，在计算 颜色通道时，必须考虑将编码的灰度值与线性光值关联起来的传递曲线。

注：SVG 图形 元素（例如 circle 或 text）在 遮罩操作中都被视为四通道 RGBA 图像。

遮罩的效果与不存在遮罩，而是将给定对象的 alpha 通道与遮罩最终得到的遮罩值相乘时产生的效果相同。

未被遮罩图像 覆盖的区域被视为透明黑色。遮罩值为 0。

注：具有重复遮罩图像图块的遮罩之间可能彼此存在偏移。各 遮罩图像之间的空间被视为透明黑色遮罩。

7.10.2. 叠加多个蒙版图像

一个盒子的蒙版可以有多层。层数由 mask-image 属性的逗号分隔值的数量决定。即使在包含其他 <mask-reference> 的值列表中有一个 none 的值，它仍然会创建一层。

参见 多重背景图像叠加 [CSS3BG]。

mask-mode 和 mask-composite 在 CSS 背景和边框中没有对应项 [CSS3BG]。与其他有对应项的蒙版属性类似，值列表从第一个值开始匹配：末尾的多余值将不使用。如果某个属性没有足够的逗号分隔值来匹配层数，UA 必须通过重复值列表来计算使用值，直到值足够为止。

所有 蒙版图层图像 都会转换为 alpha 蒙版（如有必要，请参阅 蒙版处理）并通过合成操作结合起来，考虑到由 mask-composite 指定的合成操作符。

8. 边框盒蒙版

使用 mask-border，图像可以分为九块：四个角、四个边缘和中间的一块，如下图所示。

遮罩边框图像的各个部分。

这些部分可以以不同的方式切割、缩放和拉伸以适应 蒙版边框图像区域 的大小。然后将变形的图像用作蒙版。mask-border 的语法与 CSS 背景和边框中的 border-image 属性对应 [CSS3BG]。

以下示例中的 蒙版边框图像 被分为四个角，尺寸为 75 像素，四个边缘和中间部分被拉伸和缩放。

mask-border 的示例。左侧的对象是要遮罩的对象。 第二幅图像是 alpha 遮罩，最后一幅图像是遮罩后的对象。

div {
    background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
    mask-border-slice: 25 fill;
    mask-border-repeat: stretch;
    mask-border-source: url(mask.png);
}

8.1. 蒙版边框图像源：mask-border-source 属性

指定用于 蒙版边框图像 的图像。

图像如果为空（宽度或高度为 0）、下载失败、不存在或无法显示（例如格式不受支持），则会被忽略。它仍然作为 蒙版边框图像 计入，但不会遮罩该元素。

参见 “蒙版处理” 了解如何处理 蒙版边框图像。

计算值为非 none 时，会创建一个 堆叠上下文 [CSS21]，类似于 CSS 中 opacity 属性对非 1 的值产生的效果 [CSS3COLOR]。

mask-border-source 和 mask-image 可以独立指定。如果这两个属性都有非 none 的值，则该元素会依次被两个遮罩操作所遮罩。

注意： mask-image 的应用顺序无论是在 mask-border-source 之前还是之后，结果都是一样的。

8.2. 蒙版边框图像解释：mask-border-mode 属性

mask-border-mode 属性表示是否将 <image> 值用于 mask-border-source 处理时视为亮度蒙版或 alpha 蒙版。（参见 蒙版处理。）

值的含义如下：

mask-mode 和 mask-type 属性不应影响 蒙版边框图像 类型。

8.3. 蒙版边框图像切割：mask-border-slice 属性

此属性指定从 蒙版边框图像 顶部、右侧、底部和左侧的向内偏移，将其分为九个区域：四个角，四个边缘和一个中间部分。除非存在 fill 关键字，否则中间图像部分将被丢弃并视为完全不透明的白色（中间部分覆盖的内容不会被蒙版，直接显示）。

参见 border-image-slice 属性 [CSS3BG] 了解属性值的定义。

8.4. 蒙版区域：mask-border-width 属性

蒙版边框图像 绘制在一个称为 蒙版边框图像区域 的区域内。该区域的边界默认对应于边框盒，参见 mask-border-outset。

参见 border-image-width 属性 [CSS3BG] 了解属性值的定义。

注意： 对于没有关联布局盒的 SVG 元素，border-width 被视为 0。

8.5. 边缘溢出：mask-border-outset 属性

该值指定了蒙版边框图像区域超出边框盒的范围。如果有四个值，则它们依次设置上、右、下、左边的溢出值。如果左值缺失，则与右值相同；如果下值缺失，则与上值相同；如果右值缺失，则与上值相同。

与mask-border-width 类似，<number> 表示相应的border-width 的倍数。任何 mask-border-outset 的值不允许为负数。

注意： 对于没有关联布局盒的 SVG 元素，border-width 被视为 0。

8.6. 蒙版边框图像平铺：mask-border-repeat 属性

该属性指定如何缩放和平铺 蒙版边框图像 的侧面和中间部分。第一个关键字适用于水平边，第二个适用于垂直边。如果省略第二个关键字，则假定与第一个相同。

请参阅 border-image-repeat 属性 [CSS3BG] 了解属性值的定义。

缩放和平铺 蒙版边框图像 部分的确切过程请参见 使用蒙版边框图像进行遮罩 部分。

8.7. 蒙版边框图像简写：mask-border 属性

这是一个用于设置 mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat 和 mask-border-mode 的简写属性。省略的值会被设置为其初始值。

注意： mask 简写会重置属性 mask-border, mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat 和 mask-border-mode。

8.8. 使用蒙版边框图像进行遮罩

在 mask border image（由 mask-border-source 给定）通过 mask-border-slice 值切割后，产生的九个图像将按四个步骤进行缩放、定位并平铺到其对应的 mask border image 区域，如 绘制边框图像 部分所述 [CSS3BG]。

将 mask-border-source 属性应用于使用 CSS 盒模型格式化的元素时， 会以与 CSS opacity [CSS3COLOR] 相同的方式建立一个 堆叠上下文，并且将遮罩应用于整个组渲染所有该元素的子代。

mask-border-source 属性对任何元素的 CSS 盒子的几何形状或命中测试没有影响。

9. SVG 蒙版来源

9.1. mask 元素

属性定义：

maskUnits = "userSpaceOnUse | objectBoundingBox"

定义属性 x、y、width 和 height 的坐标系统。

userSpaceOnUse

x、y、width 和 height 表示当前引用 mask 元素时的 用户坐标系统 中的值（即引用 用户坐标系统 的元素通过 mask 属性引用 mask 元素时的用户坐标系统）。

objectBoundingBox

x、y、width 和 height 表示应用了该蒙版的元素的 对象边界框 的分数或百分比。用户坐标等同于CSS单位px的大小。

如果属性 maskUnits 未指定，则效果相当于指定了 objectBoundingBox 值。

可动画：是。

maskContentUnits = "userSpaceOnUse | objectBoundingBox"

定义 mask 的内容的坐标系统。

userSpaceOnUse

用户坐标系 对于 mask 元素的内容，是在引用 mask 元素时存在的当前 用户坐标系 （即，通过 mask 属性引用 mask 元素的元素的 用户坐标系）。

objectBoundingBox

坐标系统的原点位于应用了剪切路径的元素的边界框的左上角，并且具有与该 边界框 相同的宽度和高度。用户坐标等同于CSS单位px的大小。

如果属性 maskContentUnits 未指定，则效果相当于指定了 userSpaceOnUse 值。

可动画：是。

x = "<length-percentage>"

矩形的一个角在x轴上的坐标，用于最大的可能的离屏缓冲区。如果未指定该属性，但至少指定了 y、width 或 height 属性，则效果相当于指定了值 -10%。

可动画：是。

y = "<length-percentage>"

矩形的一个角在y轴上的坐标，用于最大的可能的离屏缓冲区。如果未指定该属性，但至少指定了 x、width 或 height 属性，则效果相当于指定了值 -10%。

可动画：是。

width = "<length-percentage>"

最大的可能的离屏缓冲区的宽度。负值或零值会禁用元素的渲染。如果未指定该属性，但至少指定了 x、y 或 height 属性，则效果相当于指定了值 120%。

可动画：是。

height = "<length-percentage>"

最大的可能的离屏缓冲区的高度。负值或零值会禁用元素的渲染。如果未指定该属性，但至少指定了 x、y 或 width 属性，则效果相当于指定了值 120%。

可动画：是。

如果至少指定了一个属性 x、y、width 或 height，则给定对象和由 x、y、width 和 height 定义的矩形将建立一个当前剪切路径。蒙版的渲染内容必须被该当前剪切路径剪裁。

CSS 属性从 mask 元素的祖先继承；属性不会从引用 mask 元素的元素继承。

mask 元素从不直接渲染；它们的唯一用途是作为通过 mask 属性引用的对象。opacity、filter 和 display 属性不适用于 mask 元素；因此，即使 display 属性设置为非 none 的值，mask 元素也不会直接渲染，且即使 display 属性在 mask 元素或其任一祖先上被设置为 none，mask 元素仍然可以被引用。

9.2. 蒙版源解释: mask-type 属性

mask-type 属性定义了 mask 元素的内容是作为亮度蒙版还是 alpha 蒙版处理，如 计算蒙版值 中所述。

值的含义如下:

luminance

表示应使用蒙版的亮度值。

alpha

表示应使用蒙版的 alpha 值。

mask-type 属性允许 mask 元素的作者指定首选的蒙版模式。然而，作者可以通过在被蒙版内容上将 mask-mode 的值设置为 match-source 之外的其他值来覆盖此首选项。

<svg>
  <mask style="mask-type: luminance;" id="mask">
    ...
  </mask>
</svg>

<p style="mask-image: url(#mask); mask-mode: auto;">
  这是被蒙版的内容。
</p>

lt;svg>
 <mask style="mask-type: luminance;" id="mask2">
   ...
 </mask>
lt;/svg>

lt;p style="mask-image: url(#mask2); mask-mode: alpha;">
 这是被蒙版的内容。
lt;/p>

mask-type 属性是 SVG 元素的 呈现属性。

10. 隐私与安全注意事项

遮罩操作的执行时间应独立于源像素和目标像素。遮罩操作的实现必须确保无论像素值如何，始终耗费相同的时间。如果不遵循此规则，攻击者可能会推断出信息并发起计时攻击。

计时攻击是一种通过研究操作所需的时间来获取受保护内容信息的方法。如果，例如绘制红色像素的时间比绿色像素更长，则可能能够在不访问元素内容的情况下大致重构出正在渲染的元素的图像。

<mask-source> 和 <clip-source> 在获取资源方面有特殊要求。

用户代理必须使用由 潜在 CORS 启用的获取 方法，该方法由 [FETCH] 规范定义，用于所有 <mask-source>、<clip-source> 和 <image> 值的 mask-image、mask-border-source 和 clip-path 属性。获取资源时，用户代理必须使用“匿名”模式，将引用来源设置为样式表的 URL，并将来源设置为包含文档的 URL。如果因此导致网络错误，则效果等同于指定了值 none。

附录A: 已弃用的clip属性

本规范已弃用clip属性。建议作者使用clip-path属性代替。用户代理必须支持clip属性。

clip属性仅适用于绝对定位的元素。在SVG中，它适用于建立新视口的元素、pattern元素和mask元素。值的含义如下：

auto

元素不进行裁剪。

rect() = rect( <top>, <right>, <bottom>, <left> )

<top> 和 <bottom> 指定相对于 盒顶部边框边缘的偏移量，而 <right> 和 <left> 指定相对于盒左侧边框边缘的 偏移量。作者应使用逗号分隔偏移值。用户代理必须支持使用 逗号分隔，但也可以支持不使用逗号进行分隔（但不能混合使用），因为本规范之前的 修订版在这方面存在歧义。

<top>、<right>、<bottom> 和 <left> 可以取 <length> 值或 auto。 允许负长度。值 auto 意味着裁剪区域的给定边缘将 与元素生成的边框盒对应边缘相同（即，对于 <top> 和 <left>，auto 与 0 含义相同；对于 使用值，<bottom> 等于高度的使用值加上垂直内边距与 边框宽度之和，而 <right> 等于宽度的使用值 加上水平内边距与边框宽度之和，因此四个 auto 值会使裁剪区域与 元素的边框盒相同）。

当坐标舍入为像素坐标时，应注意确保 当 <left> 和 <right> 具有相同值时（或者 <top> 和 <bottom> 具有相同 值时），不应有任何像素保持可见；反之，当这些 值为 auto 时，元素边框盒内不应有任何像素保持隐藏。

clip 属性是SVG元素的展示属性。

示例：以下两个规则：

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

假设两个P元素的尺寸分别为50x55像素，将分别创建由虚线限定的矩形剪裁区域，如下图所示：

此图说明了两个相邻的块框，具有不同尺寸的矩形剪裁区域。（参见长描述。）

附录B: 计算描边边界框

根据element的类型，计算描边边界框的算法如下：

一个图形元素，但不包括 use 或 image

一个包含文本内容元素的 a 元素

1. 令 box 为一个矩形，其初始值为 element 的对象边界框。

2. 如果 stroke-width 的使用值 <= 0，或者 stroke 的使用值为 none，则返回 box。

3. 令 delta 为膨胀值，其初始值为 stroke-width 的一半。

4. 如果 element 不是 rect、ellipse、circle 或 image，则按适用顺序遵循以下条件之一：

   stroke-linejoin 的使用值为 miter

   1. 令 miter 为 stroke-miterlimit 的使用值。

   2. 如果 miter 小于 2 的平方根，并且 stroke-linecap 的使用值为 square，则将 delta 乘以 2 的平方根。否则，将 delta 乘以 miter。

   stroke-linecap 的使用值为 square

   1. 将 delta 乘以 2 的平方根。

5. 使用 delta 的值膨胀 box。

6. 返回 box。

注：stroke-opacity、stroke-dasharray 和 stroke-dashoffset 的值不会影响 笔画边界框的计算。

一个容器元素

use

1. 如果它是容器元素，则令 parent 为该元素，否则令其为 use 元素影子树的根。

2. 对于 parent 的每个子项 child

   1. 以 child 调用笔画边界框算法。

   2. 令 childBox 为所调用算法返回的盒值。

   3. 将 childBox 从 child 的坐标空间映射到 parent 的坐标空间。

3. 令 box 为所有 childBox 的并集。

4. 返回 box。

image

1. 返回 element 的对象边界框。

注意： 将来的SVG规范可能会覆盖此部分。

附录C: DOM接口

接口 SVGClipPathElement

SVGClipPathElement接口对应于clipPath元素。

[Exposed=Window]
interface SVGClipPathElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration clipPathUnits;
  readonly attribute SVGAnimatedTransformList transform;
};

接口 SVGMaskElement

SVGMaskElement接口对应于mask元素。

[Exposed=Window]
interface SVGMaskElement : SVGElement {
  readonly attribute SVGAnimatedEnumeration maskUnits;
  readonly attribute SVGAnimatedEnumeration maskContentUnits;
  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
  readonly attribute SVGAnimatedLength width;
  readonly attribute SVGAnimatedLength height;
};

自上次发布以来的更改

自 2014年8月26日候选推荐标准 以来，进行了以下更改。

• 允许 mask 简写属性中的 <'mask-mode'> 值 出现在除 <'mask-position'> 和 <'mask-size'> 之间以外的任何位置。

• 移除了 clipPath 和 mask 元素上的 Implements SVGUnitTypes。

• 将适用于所有图形元素的属性也应用于 use 元素。

• 将 mask-position 的初始值更改为 0% 0%，并将 mask-repeat 的初始值更改为 repeat。

• 从 mask-origin 和 mask-clip 的可能值中移除 margin-box。

• 澄清 mask-clip 对引用 mask 元素的遮罩层图像没有影响。

• 澄清当出现一个 <geometry-box> 和 no-clip 关键字时，mask 简写属性的行为。

• 对于引用一个 mask 元素的遮罩层图像，如果其 mask-mode 的值为 match-source，则应采用该 mask 元素上的 mask-type 属性值。

• 更改了具有和不具有相关 CSS 布局盒的 SVG 元素的盒映射，以与 Fill and Stroke 规范中的映射保持一致。

• 编辑性更改。

自 2014年5月22日工作草案以来，进行了以下更改。

• 将mask-size的初始值从border-box更改为auto。

自 2014年2月13日工作草案以来，进行了以下更改。

• 将 mask-box* 属性和术语重命名为 mask-border*。

• 添加了对多遮罩层的支持。（类似于 background 的多背景层。）

• 添加了 mask-composite 属性，用于通过关键字 add、subtract、intersect 和 exclude 控制多个遮罩层 图像的合成。

• 不带关键字 fill 的 mask-border-slice 不再裁剪内容的中间部分。 初始值从 0 fill 更改为 0。

• 改进了 clip-rule、mask-mode 和 mask-type 的描述。

• 将 fill 和 stroke 关键字重命名为 fill-box 和 stroke-box。

• 添加了笔画边界框的定义。

• 更明确地区分了不同的遮罩图像：遮罩层图像和遮罩边框图像。

自 2013年10月29日最后通告工作草案以来，进行了以下更改。

• 移除关于该规范未来版本将允许控制裁剪命中测试的注释。

• 更改了文档中各章节的顺序。

• 明确指出，对于 <mask-source>，必须忽略属性 mask-image、mask-repeat、mask-position、mask-clip、mask-origin 和 mask-size 的使用值，而不是这些属性本身。

• mask-size、mask-position 的“可动画”部分被描述为 可重复的列表的列表。现已更改为单个列表。

• mask-repeat 和 mask-position 的计算值曾被描述为项目列表。现已更改为 只有一个值。

• 将编辑草案的链接从 https://drafts.fxtf.org/masking/ 更改为 https://drafts.fxtf.org/css-masking-1/

自 2013 年 6 月 20 日工作草案以来，进行了以下重大更改。

• mask 会重置 mask-box 属性。

• mask-repeat、mask-position 和 mask-origin 的初始值分别更改为 no-repeat、center 和 border-box。

• 多层遮罩图像被推迟到本规范的未来级别中处理。

• 添加了用于像素操作以及获取遮罩和裁剪资源的安全模型。

• 将“child”和 select() 函数推迟到下一层级。

自 2012 年 11 月 15 日工作草案以来，进行了以下重大更改。

• 更好地与 CSS Backgrounds and Borders 模块中的术语和定义集成。

• 更改了 mask 简写属性的语法，使其与 background 简写属性保持一致。

• 定义了 SVG 资源（mask、clipPath）与图像 资源之间的实现可以有何不同。

• 添加了 mask-mode 属性，用于在 mask-image 上的亮度遮罩和 alpha 遮罩之间切换。

• 调整 SVGMaskElement 和 SVGClipPathElement 的 IDL 定义以适配 WebIDL。

• 进一步的编辑性更改。

详见更改日志。

致谢

感谢Elika J. Etemad、Cameron McCormack、Liam R. E. Quin、Björn Höhrmann、Alan Stearns、Jarek Foksa、David Baron、Boris Zbarsky、Markus Stange和Sara Soueidan的仔细审查、评论和修正。特别感谢CJ Gammon提供的图形资源。