作為一名 CSSer，我并不反對(duì)“切圖”。

相反，有些地方還是更推薦的，特別是那些奇形怪狀的 UI，合理的“切圖”可以極大地提高布局效率，當(dāng)然，這里需要一點(diǎn)點(diǎn)技巧，將“切圖”和 CSS 現(xiàn)有能力結(jié)合起來(lái)，一起學(xué)習(xí)一下吧！

一、“切圖”的局限性

傳統(tǒng)的“切圖”簡(jiǎn)單暴力，但往往缺少適應(yīng)性。

適應(yīng)性一般有兩種，一是「尺寸自適應(yīng)」，二是「顏色可以自定義」。

舉個(gè)例子，有這樣一個(gè)優(yōu)惠券樣式。

不過(guò)這里略微不一樣的地方是，兩個(gè)凹陷處都是平滑處理的

單純實(shí)現(xiàn)內(nèi)凹圓角已經(jīng)很費(fèi)勁了，現(xiàn)在還來(lái)個(gè)平滑圓角？是時(shí)候祭出最后大招了--切圖。

但是，切圖真的能解決嗎？假設(shè)已經(jīng)得到了這樣一張圖片。

div{
  background: url(a.png) 0/100% 100%;
}

下面是這張圖片在不同尺寸下的表現(xiàn)。

除非整個(gè)布局的尺寸是完全固定的，否則都會(huì)有不同程度的拉伸情況，這是視覺(jué)最為忌諱的。

另外，整張圖是固定的，也無(wú)法直接修改背景色，如果有多種狀態(tài)，還需要保存多份。

.div1{
  background: url(a.png) 0/100% 100%;
}
.div2{
  background: url(b.png) 0/100% 100%;
}

有沒(méi)有更為靈活的切圖方式呢？

二、圖形運(yùn)算與CSS MASK

經(jīng)常會(huì)和設(shè)計(jì)稿打交道，對(duì)設(shè)計(jì)軟件（Photoshop、Figma等）應(yīng)該或多或少也有所了解了，這里簡(jiǎn)單介紹一下圖形運(yùn)算（也稱布爾運(yùn)算），通常有 4 種類型。

這是一個(gè)非常常見(jiàn)的設(shè)計(jì)技巧，可以將不同的圖形經(jīng)過(guò)運(yùn)算合成新的圖形。

下面是一個(gè)經(jīng)典案例，就是通過(guò)圓的布爾運(yùn)算繪制的

這么好的特性，CSS 中有類似的嗎？

這就不得不提到CSS mask[1] 了，CSS MASK 可以指定一張圖作為遮罩圖片。

div{
  mask: url(圖片);
  mask: 漸變;
}

遮罩圖片可以是圖片，也可以是漸變。主要原理是顯示遮罩圖片不透明的部分，透明的則會(huì)被裁剪，示意如下：

但是，很多情況下，單一的遮罩并不能滿足需求，比如這樣一個(gè)帶缺口的圓，單一的漸變可能無(wú)法繪制。

因此，我們需要用到和設(shè)計(jì)中圖形布爾運(yùn)算一樣的技巧。

這和 CSS mask中的mask-composite[2]是一一對(duì)應(yīng)的。

/* Keyword values */
mask-composite: add; /* 疊加（默認(rèn)） */
mask-composite: subtract; /* 減去，排除掉上層的區(qū)域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */

利用這個(gè)特性，可以很輕易地合成帶缺口的圓，也就是說(shuō)，我們可以使用 CSS 的方式自由地去裁剪、合成我們想要的圖形。

另外，-webkit-mask-composite與標(biāo)準(zhǔn)下的值有所不同，屬性值非常多，如下：

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; /*默認(rèn)值，正常的疊加，等同于 add */
-webkit-mask-composite: source-in; /*只顯示重合的地方，等同于 intersect*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示，等同于subtract*/
-webkit-mask-composite: source-atop; /*只顯示下方遮罩*/
-webkit-mask-composite: destination-over; /*正常疊加*/
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;/*只顯示上方遮罩*/
-webkit-mask-composite: xor; /*只顯示不重合的地方，等同于 exclude*/

其實(shí)是借用了 Canvas 中的圖形合成屬性，并且區(qū)分了圖層順序，但是對(duì)于遮罩層來(lái)講，其實(shí)「只需要關(guān)注遮罩的形狀，不要關(guān)注圖層的顏色」，所以上述的一些值效果是完全相同的。

這里可以先不用每個(gè)都理解，知道有上面4種類型就行了，其實(shí)可以一一去試驗(yàn)，等熟悉了自然就知道每個(gè)屬性的具體用途了。

下面是每個(gè)屬性的演示：

https://codepen.io/xboxyan/pen/RwKbGwN。

了解了這些，接下來(lái)看看在切圖中的應(yīng)用。

三、圓滑的內(nèi)凹圓角

回到前面的問(wèn)題，同樣是切圖，不過(guò)我們需要換一種方式。

仔細(xì)觀察，從整體反向考慮，其實(shí)就是一個(gè)正常的圓角矩形，然后挖去兩個(gè)平滑的缺口，兩個(gè)缺口的大小是固定的，位置也是相對(duì)不變的，如圖所示黑色的部分

所以下面的問(wèn)題就是，「如何來(lái)得到這兩個(gè)缺口」？

單純CSS漸變是難以繪制的，所以這里可以直接“切圖”。但是設(shè)計(jì)稿上給的是紅色部分，如何去手動(dòng)做一個(gè)缺口部分呢？

這就稍微借助設(shè)計(jì)工具了，這里以 Figma 為例，我們繪制一個(gè)矩形，居右對(duì)齊，確?？梢愿采w缺口（如下，藍(lán)色部分）。

然后，將藍(lán)色矩形圖層放在原圖形下面。

最后，選中這兩個(gè)圖形，執(zhí)行減去頂層。

完成！

用同樣的方式，可以得到左右兩個(gè)半圓，或者直接翻轉(zhuǎn)一下也行。

接下來(lái)，我們需要將這兩個(gè) svg 轉(zhuǎn)為內(nèi)聯(lián)，推薦用張?chǎng)涡窭蠋煹倪@個(gè)。

SVG在線壓縮合并工具 [3]

最后，我們使用3層遮罩，兩個(gè)半圓加上整個(gè)矩形，通過(guò)遮罩合成（僅顯示不重疊部分）就可以得到我們需要的圖形了。

這樣做的好處是兩個(gè)半圓「是通過(guò)CSS定位實(shí)現(xiàn)」的，所以可以確保一定是居中、靠近邊緣的，不會(huì)因?yàn)槌叽绲淖兓冃巍?/p>

下面是完整代碼。

coupon{
  width: 300px;
  height: 150px;
  border-radius: 8px;
  background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='48' viewBox='0 0 20 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 48V0c0 2.21 1.809 3.958 3.974 4.395C13.116 6.238 20 14.315 20 24S13.116 41.762 3.974 43.605C1.81 44.042 0 45.791 0 48z' fill='%23000'/%3E%3C/svg%3E") 0 50%/20px no-repeat,
    url("data:image/svg+xml,%3Csvg width='20' height='48' viewBox='0 0 20 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 48V0c0 2.209-1.809 3.959-3.975 4.395C6.885 6.238 0 14.315 0 24s6.885 17.762 16.025 19.605C18.191 44.041 20 45.791 20 48z' fill='%23000'/%3E%3C/svg%3E") 100% 50%/20px no-repeat,
    linear-gradient(red 0 0);
  -webkit-mask-composite: xor;
}

這樣就得到了尺寸自適應(yīng)、可更換顏色的優(yōu)惠券樣式了。

你也可以訪問(wèn)在線鏈接。

• CSS coupon (codepen.io)[4]
• CSS coupon(juejin.cn)[5]

四、投票 PK 樣式

下面來(lái)看這樣一個(gè)例子。

注意，這里也是有平滑圓角的，并且在寬度改變時(shí)，傾斜角是固定的。

同樣，也可以用“切圖”的方式來(lái)實(shí)現(xiàn)這樣的效果。

在這里，我們還是從整體考慮，將圖形補(bǔ)全，用圖形合成的方式，在 Figma 中繪制出如下的“平滑直三角”。

然后在 CSS 中通過(guò) mask 減去黑色部分就行了，下面是完整代碼。

.pk{
  display: flex;
  width: 400px;
}
.item{
  height: 40px;
}
.left{
  width: 50%;
  border-radius: 40px 0 0 40px;
  background: linear-gradient(85deg, #FF9078 7.57%, #FA3440 80.06%);
  -webkit-mask: linear-gradient(red,red), url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0h-2.344a1 1 0 0 1 .957 1.287L3.855 37.148A4 4 0 0 1 .023 40H16V0z' fill='%23C6F'/%3E%3C/svg%3E") right/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}
.right{
  flex: 1;
  border-radius:  0 40px 40px 0;
  background: linear-gradient(274deg, #5FB6F5 -3.81%, #4B80EE 62.98%);
  -webkit-mask: linear-gradient(red,red), url("data:image/svg+xml,%3Csvg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 40h2.344a1 1 0 0 1-.957-1.287L12.145 2.85A4 4 0 0 1 15.977 0H0v40z' fill='%23C6F'/%3E%3C/svg%3E") left/auto 100% no-repeat;
  -webkit-mask-composite: xor;
}

這樣實(shí)現(xiàn)的傾角支持漸變，支持自適應(yīng)寬度，效果如下

你也可以訪問(wèn)在線鏈接

• CSS PK (codepen.io)[6]
• CSS PK (juejin.cn)[7]

五、平滑 tab 樣式

最后再來(lái)看一個(gè)例子：平滑 tab 標(biāo)簽，就是 Chrome 標(biāo)簽欄那樣的

這次再來(lái)介紹一個(gè)比較簡(jiǎn)單、實(shí)用的“切圖”方式。

通過(guò)前面兩個(gè)例子，可能你已經(jīng)猜到要怎么做了。沒(méi)錯(cuò)，就是先補(bǔ)全

然后在設(shè)計(jì)軟件中將黑色部分單獨(dú)“切”出來(lái)

然后在 CSS 中通過(guò) mask 減去這兩部分黑色部分就行了，和第一個(gè)例子非常像，下面是完整代碼

tab{
  line-height: 40px;
  padding: 0 30px;
  background-color:royalblue;
  color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='40' viewBox='0 0 28 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28 0H0v40h1c8.283 0 15-6.717 15-15V12c0-6.627 5.373-12 12-12z' fill='%23000'/%3E%3C/svg%3E") 0 0 no-repeat,
    url("data:image/svg+xml,%3Csvg width='28' height='40' viewBox='0 0 28 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h28v40h-1c-8.283 0-15-6.717-15-15V12C12 5.373 6.627 0 0 0z' fill='%23000'/%3E%3C/svg%3E") 100% 0 no-repeat,
    linear-gradient(red 0 0);
  -webkit-mask-composite: xor;
}

這樣實(shí)現(xiàn)的 tab 既做到了自適應(yīng)寬度，也能隨意更改背景，效果如下

你也可以訪問(wèn)在線鏈接

• CSS chrome tab (codepen.io)[8]
• CSS chrome tab (juejin.cn)[9]

六、總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，介紹了一種特殊的“切圖”手法，將切圖與CSS MASK結(jié)合起來(lái)，既保留了“切圖”的簡(jiǎn)單暴力，又滿足了CSS自適應(yīng)的特點(diǎn)，下面簡(jiǎn)單總結(jié)一下

• 傳統(tǒng)的“切圖”簡(jiǎn)單暴力，但往往缺少適應(yīng)性：尺寸自適應(yīng)和顏色自適應(yīng)。
• 圖形布爾運(yùn)算主要有：合并形狀、減去頂層、交叉形狀、排除重疊。
• CSS MASK composite 剛好也有相同的特性。
• 可以從整體反向考慮，將難以實(shí)現(xiàn)的部分由“切圖”完成，然后通過(guò)mask從整體減去這一部分。
• 由于缺口部分是通過(guò)CSS定位實(shí)現(xiàn)，因此可以確保整體的自適應(yīng)性。

前端作為設(shè)計(jì)師和開(kāi)發(fā)工程師之間的橋梁，很多實(shí)現(xiàn)都可以從設(shè)計(jì)的角度去考慮，很多復(fù)雜的效果或者布局也是一層一層疊加而成，也算是給前端提供的一種布局思路。

[1]CSS mask： https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask。

[2]mask-composite： https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite。

[3]SVG在線壓縮合并工具 ： https://www.zhangxinxu.com/sp/svgo/。

[4]CSS coupon (codepen.io)： https://codepen.io/xboxyan/pen/MWZOLGK。

[5]CSS coupon(juejin.cn)： https://code.juejin.cn/pen/7281253517154517052。

[6]CSS PK (codepen.io)： https://codepen.io/xboxyan/pen/oNJeoYv。

[7]CSS PK (juejin.cn)： https://code.juejin.cn/pen/7281253921112621097。

[8]CSS chrome tab (codepen.io)： https://codepen.io/xboxyan/pen/BavJYbE。

[9]CSS chrome tab (juejin.cn)： https://code.juejin.cn/pen/7281253036251414569  。