详解CSS Masking模块之Clipping

前端  /  管理员 发布于 7年前   204

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的 mask 和 clip-path 来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于 mask 的相关特性理解的还不够透彻。因此重新阅读 CSS Masking Module Level 1规范 中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。

简介

我对CSS Masking模块的最初认知：

CSS Masking就是CSS的 mask 属性（或 mask 相关的属性）！

事实上，CSS Masking模块中包含了两个部分： masking （即： mask ）和 clipping （ clip-path ）。

这两种方式都可以帮助我们实现一些类似下图这样的镂空效果：

我将 Masking 译为 遮罩 。那怎么理解遮罩呢？简单或形象的理解，大至是这样的一个意思：

• 我有一个源，比如我们的页面
• 我有一个层（遮罩层），它可能是一张图像或一个图形元素
• 将两者合在一起，源在遮罩层下面

也就是说， Masking描述了如何使用另一个图形元素或图像作为亮度（luminance）或alpha遮罩 。遮罩层可以是一张图像也可以是SVG绘制的图形，通常使用CSS或SVG渲染出来的元素（包括其子元素）会被绘制到缓冲区，然后该缓冲区将被组合到元素的父元素中。官方这段描述我个人认为过于拗口，自己简单的理解正如上图，图像源和遮罩层将会创建一个缓冲区，并且源和遮罩层会有一个合成的计算，在合层阶段之前，亮度和Alpha遮罩会影响这个 缓冲区 的透明度。如此得到一个类似镂空的效果。

而 Cliping （剪切）描述了视觉元素的可见区域。可以使用某些SVG图形或基本形状来描述该区域。此区域之外的任何内容都将看不到。

简单地说，该规范定义了两种不同的图形操作，即， 完全 或 部分 地隐藏了对象的部分。

两者区别之处：

• 剪切 需要一个剪切路径，剪切路径可以是一个 闭合矢量路径 、 形状 或 多边形 ；剪切路径是一个区域，该区域 内部 的所有内容都可以显示出来，外部的所有内容将被剪切掉，在页面上不可见
• 遮罩 需要一个高亮或Alpha遮罩层，将源和遮罩层合在一起会创建一个缓冲区域，在合层阶段之前，亮度和Alpha遮罩会影响这个 缓冲区 的透明度，从而实现完全或部分遮罩源的部分

注意：虽然遮罩提供了许多增强图形效果的可能性，并且通常对内容的可见部分提供了更多的控制，但是剪切路径可以执行得更好，基本形状可以更容易插值。

相关术语

在深入学习和了解 Masking 和 Clipping 相关的知识前，我们先了解一些有关于这方面的术语。

源对象

不管是Masking还是Clipping中都会有一个源（对象）的概念。这个源可能是一个HTML元素，比如一个 <img /> 元素。

路径或基本图形

在Clipping中对源对象进行剪切时，需要一个图形，而这个图形可以是一些基本图形，也可以是一个闭合的矢量路径。在CSS中，我们可以通过 clip-path 来绘制这些图形：

正如上面示例所示，可以绘制：

inset()circle()ellipse()polygon()url()

其中 inset() 、 circle() 和 ellipse() 绘制基本图形， polygon() 绘制多边形，另外 url(#id) 配合SVG的 clipPath 来绘制更多圆滑的路径（这个也被称闭合的矢量路径）。怎么通过这些函数来绘制图形，后面介绍 clip-path 的时候再述。

遮罩层

在Masking中有一个遮罩层，这个遮罩层是一个图像（渐变绘制的也是），该层也被称为遮罩模式，主要有 高亮 和 Alpha 两种模式。

Alpha模式：带有 alpha 通道的图像， alpha 通道是包含在每个像素数据中的透明度信息。最简单的例子是带有黑色和透明区域的PNG图像。遮罩图像 黑色部分 将会显示（ alpha 的值是 1 ），透明区域（ alpha 的值为 0 ）内容将会隐藏：

高亮模式使用图像的 亮度 值作为遮罩值。如下图所示，遮罩层白色区域将显示出来，透明区域将会被隐藏：

最终得到的效果看上去相似：

Clipping

从上面的示例中，我们可以发现，剪切可以限制渲染区域，即所谓的剪切区域。从概念上讲：

剪切路径（不管是图形还是闭合的矢量路径）对某个元素进行剪切，将会分成两个区域， 路径内 （剪切区域内） 和 路径外 （剪切区域外）， 位于剪切区域内的部分可见（被绘制出来） 。

在Clipping中会用到 clip-path 、 clip-rule 和 <clipPath> ：

clip-path ：用来绘制图形 clip-rule ：用于确定给定点是否位于图形元素创建的剪贴区域的形状内的算法 <clipPath> ：是SVG中的一个标签元素，可以被用于 clip-path 的 url() 中，当作剪切路径源

接下来了解这三个属性。

clip-path

clip-path 主要用来创建一个只有元素的部分区域可以显示的剪切区域， 区域内可见，区域外不可见 。其值主要有：

none ：未创建任何剪切区域 <basic-shape> ：CSS中绘制基本形状的函数，常见的函数有 inset() 、 circle() 、 ellipse() 、 polygon() 、 url() 和 path() <geometry-box> ：如同 <basic-shape> 一起声明，它将为 <basic-shape> 提供相应的参考框盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）

<geometry-box> 提供的框盒模式主要有：

margin-box ：使用 margin box 作为引用框。其主要由 margin 的外部边缘包围的形状。这种形状的圆角半径由相应的 border-radius 和 margin 的值来决定。如果 border-radius 和 margin 的比是 1 或更大，则边距框（ margin-box ）的半径是 border-radius + margin 。反之，如果两者的比小于 1 ，那么边距框的半径是 border-radius + (margin * (1 + (ratio-1)^3)) （ ratio 是 border-radius 和 margin 的比，即 border-radius / margin ） border-box ：使用 border box 作为引用框。定义了 border 外部边缘包围的形状，此形状遵循 border 外部边缘所有常规的 border-radius 规则 padding-box ：使用 padding box 作为引用框。定义了 padding 外部边缘包围的形状，此形状遵循 padding 外部边缘所有常规的 border-radius 规则 content-box ：使用 content box 作为引用框。定义了 content 外部边缘包围的形状，此框的每个 border-radius 都大于 0 或 border-radius - border-width - padding fill-box ：利用对象边界框作（ Object bounding box ）为引用框 stroke-box ：使用笔触边界框（ Stroke bounding box ）作为引用框 view-box ：使用最近的 SVG视窗（Viewport） 作为引用框。如果 viewBox 属性被指定来为元素创建SVG视窗，引用框将会被定位在坐标系统的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽和高

如果是一个HTML元素被剪切，可以使用 margin-box 、 border-box 、 padding-box 或 content-box 框盒模式；如果运用于一个SVG元素上，可以使用 fill-box 、 stroke-box 或 view-box 。

先来看绘制基本函数的使用。

inset()

inset() 用来绘制矩形，或者带圆角的矩形。

clip-path: inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

<length-percentage> 用来设置剪切区域距离上、右、下和左侧外边缘的距离；可以设置一个、两个、三个或四个值。

如果设置一个值，表示上右下左四个值相等；如果设置两个值，表示上下取第一个值，左右取第二个值；如果取值三个值，表示上取第一个值，左右取第二值，下取值第三个值；

如果取值四个值，表示上取第一个值，右取第二个值，下取第三个值，左取第四个值。类似于 border 的取值 round 用来设置裁剪区域是否带圆角，未显式设置表示剪切区域没有圆角，如果设置表示剪切区域带有圆角 <border-radius> 用来设置 border-radius 的半径值，其使用和CSS的 border-radius 一样，也可以带 /

用张图来表示：

来看个Demo：

circle()

circle() 用来绘制圆。

clip-path: circle(<shape-radius> at posX posY)

<shape-radius> ：圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% ） posX posY ：设置圆心位置， posX 是 x 轴的位置， posY 是 y 轴的位置，取值可以类似于 background-position

ellipse()

ellipse() 用来绘制椭圆：

clip-path:  ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

<shape-radius> ：椭圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side ，如果只取一个值的时候，表示 x 轴和 y 的半径值是一样的

at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% )

<position> ：即 posX posY ，用于设置圆心位置，如果未显式设置，其圆心在元素正中间 (center) 即 50% 50% ，其使用类似于 background-position

polygon()

polygon() 主要用来绘制不规则的多边形：

clip-path: polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )

• <fill-rule> ：填充规则，后面介绍 clip-rule 规则会细节，具体解释可以阅读 SVG中的 fill-rule 相关的规范
•  <length-percentage> <length-percentage> 设置多边形点的位置

一个多边形至少会有三个点组成，比如简单的三角形，如果使用 polygon() 来绘制一个三角形的话，那么就会有三对坐标点，每对之间用一个 , 分隔，比如：