最近業(yè)務(wù)中需要實現(xiàn)一些鏤空的效果。看到這些效果我最初想到的是通過CSS的 mask 和 clip-path 來實現(xiàn)，甚至還想結(jié)合SVG相關(guān)的特性。為了驗證自己的一些想法，開始著手擼碼，但問題來了，在擼碼的過程中，我發(fā)現(xiàn)自己對于 mask 的相關(guān)特性理解的還不夠透徹。因此重新閱讀 CSS Masking Module Level 1規(guī)范 中的文檔和相關(guān)教程。才發(fā)現(xiàn)原來CSS Masking是如此的強大。下面是我自己對CSS Masking模塊的一些理解，希望對大家學(xué)習和了解該功能模塊有所幫助。

簡介

我對CSS Masking模塊的最初認知：

CSS Masking就是CSS的 mask 屬性（或 mask 相關(guān)的屬性）！

事實上，CSS Masking模塊中包含了兩個部分： masking （即： mask ）和 clipping （ clip-path ）。

這兩種方式都可以幫助我們實現(xiàn)一些類似下圖這樣的鏤空效果：

我將 Masking 譯為 遮罩 。那怎么理解遮罩呢？簡單或形象的理解，大至是這樣的一個意思：

• 我有一個源，比如我們的頁面
• 我有一個層（遮罩層），它可能是一張圖像或一個圖形元素
• 將兩者合在一起，源在遮罩層下面

也就是說， Masking描述了如何使用另一個圖形元素或圖像作為亮度（luminance）或alpha遮罩 。遮罩層可以是一張圖像也可以是SVG繪制的圖形，通常使用CSS或SVG渲染出來的元素（包括其子元素）會被繪制到緩沖區(qū)，然后該緩沖區(qū)將被組合到元素的父元素中。官方這段描述我個人認為過于拗口，自己簡單的理解正如上圖，圖像源和遮罩層將會創(chuàng)建一個緩沖區(qū)，并且源和遮罩層會有一個合成的計算，在合層階段之前，亮度和Alpha遮罩會影響這個 緩沖區(qū) 的透明度。如此得到一個類似鏤空的效果。

而 Cliping （剪切）描述了視覺元素的可見區(qū)域?？梢允褂媚承㏒VG圖形或基本形狀來描述該區(qū)域。此區(qū)域之外的任何內(nèi)容都將看不到。

簡單地說，該規(guī)范定義了兩種不同的圖形操作，即， 完全 或 部分 地隱藏了對象的部分。

兩者區(qū)別之處：

• 剪切 需要一個剪切路徑，剪切路徑可以是一個 閉合矢量路徑 、 形狀 或 多邊形 ；剪切路徑是一個區(qū)域，該區(qū)域 內(nèi)部 的所有內(nèi)容都可以顯示出來，外部的所有內(nèi)容將被剪切掉，在頁面上不可見
• 遮罩 需要一個高亮或Alpha遮罩層，將源和遮罩層合在一起會創(chuàng)建一個緩沖區(qū)域，在合層階段之前，亮度和Alpha遮罩會影響這個 緩沖區(qū) 的透明度，從而實現(xiàn)完全或部分遮罩源的部分

注意：雖然遮罩提供了許多增強圖形效果的可能性，并且通常對內(nèi)容的可見部分提供了更多的控制，但是剪切路徑可以執(zhí)行得更好，基本形狀可以更容易插值。

相關(guān)術(shù)語

在深入學(xué)習和了解 Masking 和 Clipping 相關(guān)的知識前，我們先了解一些有關(guān)于這方面的術(shù)語。

源對象

不管是Masking還是Clipping中都會有一個源（對象）的概念。這個源可能是一個HTML元素，比如一個 <img /> 元素。

路徑或基本圖形

在Clipping中對源對象進行剪切時，需要一個圖形，而這個圖形可以是一些基本圖形，也可以是一個閉合的矢量路徑。在CSS中，我們可以通過 clip-path 來繪制這些圖形：

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

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

其中 inset() 、 circle() 和 ellipse() 繪制基本圖形， polygon() 繪制多邊形，另外 url(#id) 配合SVG的 clipPath 來繪制更多圓滑的路徑（這個也被稱閉合的矢量路徑）。怎么通過這些函數(shù)來繪制圖形，后面介紹 clip-path 的時候再述。

遮罩層

在Masking中有一個遮罩層，這個遮罩層是一個圖像（漸變繪制的也是），該層也被稱為遮罩模式，主要有 高亮 和 Alpha 兩種模式。

Alpha模式：帶有 alpha 通道的圖像， alpha 通道是包含在每個像素數(shù)據(jù)中的透明度信息。最簡單的例子是帶有黑色和透明區(qū)域的PNG圖像。遮罩圖像 黑色部分 將會顯示（ alpha 的值是 1 ），透明區(qū)域（ alpha 的值為 0 ）內(nèi)容將會隱藏：

高亮模式使用圖像的 亮度 值作為遮罩值。如下圖所示，遮罩層白色區(qū)域?qū)@示出來，透明區(qū)域?qū)浑[藏：

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

Clipping

從上面的示例中，我們可以發(fā)現(xiàn)，剪切可以限制渲染區(qū)域，即所謂的剪切區(qū)域。從概念上講：

剪切路徑（不管是圖形還是閉合的矢量路徑）對某個元素進行剪切，將會分成兩個區(qū)域， 路徑內(nèi) （剪切區(qū)域內(nèi)） 和 路徑外 （剪切區(qū)域外）， 位于剪切區(qū)域內(nèi)的部分可見（被繪制出來） 。

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

clip-path ：用來繪制圖形 clip-rule ：用于確定給定點是否位于圖形元素創(chuàng)建的剪貼區(qū)域的形狀內(nèi)的算法 <clipPath> ：是SVG中的一個標簽元素，可以被用于 clip-path 的 url() 中，當作剪切路徑源

接下來了解這三個屬性。

clip-path

clip-path 主要用來創(chuàng)建一個只有元素的部分區(qū)域可以顯示的剪切區(qū)域， 區(qū)域內(nèi)可見，區(qū)域外不可見 。其值主要有：

none ：未創(chuàng)建任何剪切區(qū)域 <basic-shape> ：CSS中繪制基本形狀的函數(shù)，常見的函數(shù)有 inset() 、 circle() 、 ellipse() 、 polygon() 、 url() 和 path() <geometry-box> ：如同 <basic-shape> 一起聲明，它將為 <basic-shape> 提供相應(yīng)的參考框盒子。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角（比如說，被 border-radius 定義的剪切路徑）

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

margin-box ：使用 margin box 作為引用框。其主要由 margin 的外部邊緣包圍的形狀。這種形狀的圓角半徑由相應(yīng)的 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 外部邊緣所有常規(guī)的 border-radius 規(guī)則 padding-box ：使用 padding box 作為引用框。定義了 padding 外部邊緣包圍的形狀，此形狀遵循 padding 外部邊緣所有常規(guī)的 border-radius 規(guī)則 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 屬性被指定來為元素創(chuàng)建SVG視窗，引用框?qū)欢ㄎ辉谧鴺讼到y(tǒng)的原點，引用框位于由 viewBox 屬性建立的坐標系的原點，引用框的尺寸用來設(shè)置 viewBox 屬性的寬和高

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

先來看繪制基本函數(shù)的使用。

inset()

inset() 用來繪制矩形，或者帶圓角的矩形。

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

<length-percentage> 用來設(shè)置剪切區(qū)域距離上、右、下和左側(cè)外邊緣的距離；可以設(shè)置一個、兩個、三個或四個值。

如果設(shè)置一個值，表示上右下左四個值相等；如果設(shè)置兩個值，表示上下取第一個值，左右取第二個值；如果取值三個值，表示上取第一個值，左右取第二值，下取值第三個值；

如果取值四個值，表示上取第一個值，右取第二個值，下取第三個值，左取第四個值。類似于 border 的取值 round 用來設(shè)置裁剪區(qū)域是否帶圓角，未顯式設(shè)置表示剪切區(qū)域沒有圓角，如果設(shè)置表示剪切區(qū)域帶有圓角 <border-radius> 用來設(shè)置 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 ：顯式的設(shè)置圓心的位置，如果未顯式設(shè)置，默認的圓心在元素的正中間，即 center （ 50% 50% ） posX posY ：設(shè)置圓心位置， 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 ：顯式的設(shè)置圓心的位置，如果未顯式設(shè)置，默認的圓心在元素的正中間，即 center （ 50% 50% )

<position> ：即 posX posY ，用于設(shè)置圓心位置，如果未顯式設(shè)置，其圓心在元素正中間 (center) 即 50% 50% ，其使用類似于 background-position

polygon()

polygon() 主要用來繪制不規(guī)則的多邊形：

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

• <fill-rule> ：填充規(guī)則，后面介紹 clip-rule 規(guī)則會細節(jié)，具體解釋可以閱讀 SVG中的 fill-rule 相關(guān)的規(guī)范
•  <length-percentage> <length-percentage> 設(shè)置多邊形點的位置

一個多邊形至少會有三個點組成，比如簡單的三角形，如果使用 polygon() 來繪制一個三角形的話，那么就會有三對坐標點，每對之間用一個 , 分隔，比如：

最新評論