當前位置：首頁 > 科技 > 軟件

CSS Mask 與切圖藝術

來源：責編：時間：2023-09-25 10:37:32 428觀看

導讀作為一名 CSSer，我并不反對“切圖”。相反，有些地方還是更推薦的，特別是那些奇形怪狀的 UI，合理的“切圖”可以極大地提高布局效率，當然，這里需要一點點技巧，將“切圖”和 CSS 現有能力結合起來，一起學習一下吧！一、“切圖”的

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

相反，有些地方還是更推薦的，特別是那些奇形怪狀的 UI，合理的“切圖”可以極大地提高布局效率，當然，這里需要一點點技巧，將“切圖”和 CSS 現有能力結合起來，一起學習一下吧！

一、“切圖”的局限性

傳統的“切圖”簡單暴力，但往往缺少適應性。

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

舉個例子，有這樣一個優惠券樣式。

0Gs28資訊網——每日最新資訊28at.com

二、圖形運算與CSS MASK

經常會和設計稿打交道，對設計軟件（Photoshop、Figma等）應該或多或少也有所了解了，這里簡單介紹一下圖形運算（也稱布爾運算），通常有 4 種類型。

這是一個非常常見的設計技巧，可以將不同的圖形經過運算合成新的圖形。

下面是一個經典案例，就是通過圓的布爾運算繪制的

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

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

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

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

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

因此，我們需要用到和設計中圖形布爾運算一樣的技巧。

這和 CSS mask中的mask-composite[2]是一一對應的。

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

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

另外，-webkit-mask-composite與標準下的值有所不同，屬性值非常多，如下：

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/-webkit-mask-composite: source-over; /*默認值，正常的疊加，等同于 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*/

其實是借用了 Canvas 中的圖形合成屬性，并且區分了圖層順序，但是對于遮罩層來講，其實「只需要關注遮罩的形狀，不要關注圖層的顏色」，所以上述的一些值效果是完全相同的。

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

下面是每個屬性的演示：

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

了解了這些，接下來看看在切圖中的應用。

三、圓滑的內凹圓角

回到前面的問題，同樣是切圖，不過我們需要換一種方式。

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

所以下面的問題就是，「如何來得到這兩個缺口」？

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

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

然后，將藍色矩形圖層放在原圖形下面。

最后，選中這兩個圖形，執行減去頂層。

完成！

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

接下來，我們需要將這兩個 svg 轉為內聯，推薦用張鑫旭老師的這個。

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

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

這樣做的好處是兩個半圓「是通過CSS定位實現」的，所以可以確保一定是居中、靠近邊緣的，不會因為尺寸的變化而變形。

下面是完整代碼。

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;}

這樣就得到了尺寸自適應、可更換顏色的優惠券樣式了。

你也可以訪問在線鏈接。

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

四、投票 PK 樣式

下面來看這樣一個例子。

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

同樣，也可以用“切圖”的方式來實現這樣的效果。

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

然后在 CSS 中通過 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;}

這樣實現的傾角支持漸變，支持自適應寬度，效果如下

你也可以訪問在線鏈接

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

五、平滑 tab 樣式

最后再來看一個例子：平滑 tab 標簽，就是 Chrome 標簽欄那樣的

這次再來介紹一個比較簡單、實用的“切圖”方式。

通過前面兩個例子，可能你已經猜到要怎么做了。沒錯，就是先補全

然后在設計軟件中將黑色部分單獨“切”出來

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

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;}

這樣實現的 tab 既做到了自適應寬度，也能隨意更改背景，效果如下

你也可以訪問在線鏈接

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

六、總結一下

以上就是本文的全部內容了，介紹了一種特殊的“切圖”手法，將切圖與CSS MASK結合起來，既保留了“切圖”的簡單暴力，又滿足了CSS自適應的特點，下面簡單總結一下

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

前端作為設計師和開發工程師之間的橋梁，很多實現都可以從設計的角度去考慮，很多復雜的效果或者布局也是一層一層疊加而成，也算是給前端提供的一種布局思路。

[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 。

本文鏈接：http://m.www897cc.com/showinfo-26-11243-0.htmlCSS Mask 與切圖藝術

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：被卷到“準下崗”，這九種編程語言要消失了！

下一篇：理解Kafka offset

標簽：

熱門焦點

中興AX5400Pro+上手體驗：再升級雙2.5G網口+USB 3.0這次全都有

2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
服務存儲設計模式：Cache-Aside模式

Cache-Aside模式一種常用的緩存方式，通常是把數據從主存儲加載到KV緩存中，加速后續的訪問。在存在重復度的場景，Cache-Aside可以提升服務性能，降低底層存儲的壓力，缺點是緩存和底
Flowable工作流引擎的科普與實踐

一.引言當我們在日常工作和業務中需要進行各種審批流程時，可能會面臨一系列技術和業務上的挑戰。手動處理這些審批流程可能會導致開發成本的增加以及業務復雜度的上升。在這
簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文?？焖籴绕穑?/a>

來源：視聽觀察永恒文希傳媒作為一家MCN公司，說起它的名字來，可能大家會覺得有點兒陌生，但是說出來下面一串的名字之后，或許大家就會感到震驚，原來這么多網紅，都簽約這家公司了。根

阿里大調整

來源：產品劉有媒體報道稱，近期淘寶天貓集團啟動了近年來最大的人力制度改革，涉及員工績效、層級體系等多個核心事項，目前已形成一個初步的“征求意見版”：1、取消P序列
三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

據官方此前宣布，三星將于7月26日也就是今天在韓國首爾舉辦Unpacked活動，屆時將帶來帶來包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy
英特爾Xe-HP項目終止，將專注Xe-HPC/HPG系列顯卡

據10 月 31 日消息報道，英特爾高級副總裁兼加速計算系統和圖形事業部總經理表示，Xe-HP“ Arctic Sound” 系列服務器 GPU 已經應用于 oneAPI devcloud 云服
AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

光影交錯的鏡像世界，虛實幻化的視覺奇觀，虛擬偶像與真人共同主持，這些場景都出現在2019世界人工智能大會的舞臺上。8月29日至31日，“AI藝術欣賞體驗會”在上海
世界人工智能大會國際日開幕式活動在世博展覽館開啟

30日上午，世界人工智能大會國際日開幕式活動在世博展覽館開啟，聚集國際城市代表、重量級院士專家、國際創新企業代表，共同打造人工智能交流平臺。上海市副市

阿里大調整

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

CSS Mask 與切圖藝術

一、“切圖”的局限性

二、圖形運算與CSS MASK

三、圓滑的內凹圓角

四、投票 PK 樣式

五、平滑 tab 樣式

六、總結一下

中興AX5400Pro+上手體驗：再升級雙2.5G網口+USB 3.0這次全都有

服務存儲設計模式：Cache-Aside模式

Flowable工作流引擎的科普與實踐

簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文?？焖籴绕穑?/a>

三星Galaxy Z Fold5今日亮相：厚度縮減但仍略顯厚重

英特爾Xe-HP項目終止，將專注Xe-HPC/HPG系列顯卡

AI藝術欣賞體驗會在上海梅賽德斯奔馳中心音樂俱樂部上演

世界人工智能大會國際日開幕式活動在世博展覽館開啟

最新推薦

猜你喜歡

熱門推薦

相關資訊

CSS Mask 與切圖藝術

一、“切圖”的局限性

二、圖形運算與CSS MASK

三、圓滑的內凹圓角

四、投票 PK 樣式

五、平滑 tab 樣式

六、總結一下

最新推薦

猜你喜歡

熱門推薦

相關資訊

三、圓滑的內凹圓角

六、總結一下