CSS 遮罩模块 第一级

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 形状模块第一级 [CSS-SHAPES] 中。本规范未定义的值类型在 CSS 值和单位模块第三级中定义 [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 元素被引用时使用 (即引用 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。
  如果在 clip-path 元素上放置了有效的引用，则最终的剪裁路径将是 clipPath 元素内容与引用剪裁路径的交集。
  如果在 clipPath 的子元素之一上放置了有效的 clip-path 引用，那么该子元素将在与其他子元素合并前通过引用剪裁路径进行剪裁。

• 空的剪裁路径将完全裁剪掉应用了 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-clip 确定了 蒙版绘制区域，该区域决定了受蒙版影响的区域。元素的绘制内容必须限制在此区域内。

mask-clip 属性不会影响引用 蒙版 元素的 蒙版层图像。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-repeat、mask-position、mask-clip、mask-origin 和 mask-size 的值在 <mask-reference> 引用 mask 元素时不应产生效果。在这种情况下，该元素定义了蒙版图层图像的位置、大小和剪裁。

简写属性 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. 从颜色通道值计算亮度值。

   • 如果蒙版元素上的 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 表示剪裁区域的给定边缘将与元素生成的边框盒相同（即 auto 表示与 0 相同，适用于 <top> 和 <left>；同样，对于 <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-mode'>值在mask简写中出现在<'mask-position'>和<'mask-size'>之间的任何位置。

• 删除了在clipPath和mask元素上实现SVGUnitTypes的内容。

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

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

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

• 澄清mask-clip对引用mask元素的mask layer image没有影响。

• 澄清mask简写行为，说明在出现<geometry-box>和no-clip关键字时的行为。

• 当mask-mode应用于mask layer image并引用了具有match-source值的mask元素时，应该采用该mask-type属性的值。

• 更改了映射有无CSS布局框的SVG元素的行为以匹配填充和描边规范中的映射。

• 编辑上的更改。

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

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

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

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

• 添加了对多个mask层的支持。(类似于background的多个背景层。)

• 添加了mask-composite属性，以控制通过关键词add、subtract、intersect和exclude对多个mask layer images进行合成。

• mask-border-slice没有fill关键字时不再剪裁中间内容。将初始值从0 fill更改为0。

• 对clip-rule、mask-mode和mask-type进行了更好的描述。

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

• 添加了对stroke bounding box的定义。

• 更好地区分了遮罩图像：mask layer image和mask border image。

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

• 删除了关于未来版本将允许控制裁剪上的命中测试的注释。

• 更改了文档中的部分顺序。

• 明确指出已用值应忽略属性mask-image、mask-repeat、mask-position、mask-clip、mask-origin和mask-size的值，而不是忽略属性本身。

• mask-size和mask-position的"可动画"部分从可重复列表修改为单一列表。

• 将mask-repeat和mask-position的计算值从项目列表更改为单一值。

• 将ED的链接从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。

• 推迟了多层遮罩图像的实现，留待本规范的未来版本。

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

• 推迟了"子"和select()函数的实现，留待下一个级别。

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

• 更好地整合了CSS背景和边框模块中的术语和定义。

• 对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提供的图形资源。