詳解CSS Masking模塊之Clipping

發(fā)布時(shí)間：2019-05-17 14:54:45 作者：佚名

這篇文章主要介紹了CSS Masking模塊之Clipping的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

簡(jiǎn)介

我對(duì)CSS Masking模塊的最初認(rèn)知：

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

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

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

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

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

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

而 Cliping （剪切）描述了視覺元素的可見區(qū)域。可以使用某些SVG圖形或基本形狀來描述該區(qū)域。此區(qū)域之外的任何內(nèi)容都將看不到。

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

兩者區(qū)別之處：

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

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

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

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

源對(duì)象

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

路徑或基本圖形

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

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

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

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

遮罩層

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

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

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

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

Clipping

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

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

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

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

接下來了解這三個(gè)屬性。

clip-path

clip-path 主要用來創(chuàng)建一個(gè)只有元素的部分區(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 外部邊緣包圍的形狀，此框的每個(gè) border-radius 都大于 0 或 border-radius - border-width - padding fill-box ：利用對(duì)象邊界框作（ Object bounding box ）為引用框 stroke-box ：使用筆觸邊界框（ Stroke bounding box ）作為引用框 view-box ：使用最近的 SVG視窗（Viewport）作為引用框。如果 viewBox 屬性被指定來為元素創(chuàng)建SVG視窗，引用框?qū)?huì)被定位在坐標(biāo)系統(tǒng)的原點(diǎn)，引用框位于由 viewBox 屬性建立的坐標(biāo)系的原點(diǎn)，引用框的尺寸用來設(shè)置 viewBox 屬性的寬和高

如果是一個(gè)HTML元素被剪切，可以使用 margin-box 、 border-box 、 padding-box 或 content-box 框盒模式；如果運(yùn)用于一個(gè)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è)置一個(gè)、兩個(gè)、三個(gè)或四個(gè)值。

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

如果取值四個(gè)值，表示上取第一個(gè)值，右取第二個(gè)值，下取第三個(gè)值，左取第四個(gè)值。類似于 border 的取值 round 用來設(shè)置裁剪區(qū)域是否帶圓角，未顯式設(shè)置表示剪切區(qū)域沒有圓角，如果設(shè)置表示剪切區(qū)域帶有圓角 <border-radius> 用來設(shè)置 border-radius 的半徑值，其使用和CSS的 border-radius 一樣，也可以帶 /

用張圖來表示：

來看個(gè)Demo：

circle()

circle() 用來繪制圓。

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

<shape-radius> ：圓的半徑，其值可以是 <length-percentage> 、 closest-side 、 farthest-side at ：顯式的設(shè)置圓心的位置，如果未顯式設(shè)置，默認(rèn)的圓心在元素的正中間，即 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 ，如果只取一個(gè)值的時(shí)候，表示 x 軸和 y 的半徑值是一樣的

at ：顯式的設(shè)置圓心的位置，如果未顯式設(shè)置，默認(rèn)的圓心在元素的正中間，即 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ī)則會(huì)細(xì)節(jié)，具體解釋可以閱讀 SVG中的 fill-rule 相關(guān)的規(guī)范
<length-percentage> <length-percentage> 設(shè)置多邊形點(diǎn)的位置

一個(gè)多邊形至少會(huì)有三個(gè)點(diǎn)組成，比如簡(jiǎn)單的三角形，如果使用 polygon() 來繪制一個(gè)三角形的話，那么就會(huì)有三對(duì)坐標(biāo)點(diǎn)，每對(duì)之間用一個(gè) , 分隔，比如：