當(dāng)前內(nèi)容所在位置（可進(jìn)入專欄查看其他譯好的章節(jié)內(nèi)容）

• 第四部分 視覺(jué)增強(qiáng)技術(shù) ??
• 【第 14 章 蒙版、形狀與剪切】 ??
  • 14.1 濾鏡
    • 14.1.1 濾鏡的類型
    • 14.1.2 背景濾鏡
  • 14.2 蒙版
    • 14.2.1 帶漸變效果的蒙版特效
    • 14.2.2 基于亮度來(lái)定義蒙版
    • 14.2.3 其他蒙版屬性
  • 14.3 剪切路徑 ??
    • 14.3.1 多邊形的裁剪路徑 ??
    • 14.3.2 Firefox 內(nèi)置的剪切路徑工具 ??
    • 14.3.3 其他剪切路徑類型 ??
  • 14.4 浮動(dòng)與形狀

《CSS in Depth》新版封面

譯者按
本篇延續(xù)了上一節(jié)的風(fēng)格，提綱挈領(lǐng)地介紹了 CSS 剪切路徑（clip-path）的操作技巧與相關(guān)注意事項(xiàng)。其中最引人注目的莫過(guò)于順帶介紹的參考閱讀資料和線上小工具了。念書時(shí)常聽(tīng)老師講，一千個(gè)讀者有一千個(gè)哈姆雷特。同樣的道理在這本硬核資料書中同樣適用：是草草略過(guò)作者給出的延伸材料，還是一步一個(gè)腳印認(rèn)真學(xué)習(xí)這些內(nèi)容，書中無(wú)數(shù)個(gè)這樣的細(xì)微抉擇，其實(shí)就已經(jīng)決定了讀者未來(lái)能夠到達(dá)的 CSS 乃至前端開(kāi)發(fā)的高度。希望大家都能做一個(gè)對(duì)技術(shù)細(xì)節(jié)“斤斤計(jì)較”的有心人。

14.3 剪切路徑 Clipping paths

剪切路徑（clipping path） 是另一種有選擇地隱藏元素局部區(qū)域的方法。剪切路徑在概念上與蒙版類似，但它不是用圖片來(lái)遮擋元素，而是通過(guò)數(shù)學(xué)方法來(lái)定義形狀，即通過(guò) clip-path 屬性進(jìn)行設(shè)置。

本節(jié)先為您演示剪切路徑的一個(gè)典型案例，然后在逐步過(guò)渡到更復(fù)雜的知識(shí)點(diǎn)。本節(jié)第一個(gè)示例的最終效果如圖 14.7 所示。其中，剪切形狀被定義為一個(gè)圓。頁(yè)面元素所有不在該形狀內(nèi)的部分就會(huì)被隱藏。此時(shí)，圓的尺寸大于圖片高度，從而令元素可見(jiàn)部分的上下邊緣呈直線、左右兩邊則呈曲線效果。

【圖 14.7 矩形示例圖片在設(shè)置剪切路徑為圓形后的最終效果】

要實(shí)現(xiàn)上述效果，我們先根據(jù)代碼清單 14.9 給出的 HTML 標(biāo)記，給示例頁(yè)面添加一個(gè)圖片元素。操作時(shí)，既可以替換到前面演示的 HTML 元素，也可以將新的圖片元素追加到頁(yè)面末尾。

代碼清單 14.9 演示剪切路徑特效對(duì)應(yīng)的圖片 HTML 標(biāo)記

<imgclass="clipped" src="images/eagle.jpg"alt="Golden Eagle"width="796" height="529"
/>

接著利用類名 clipped 選中該元素，并通過(guò) clip-path 屬性設(shè)置一個(gè)剪切路徑；設(shè)置該屬性最簡(jiǎn)單的一種方式就是使用 circle() 函數(shù)。該函數(shù)需要一個(gè)表示圓半徑的長(zhǎng)度值或百分?jǐn)?shù)作參數(shù)。請(qǐng)根據(jù)代碼清單 14.10 同步更新本地樣式表。

代碼清單 14.10 設(shè)置圓形剪切路徑的示例樣式代碼

.clipped {clip-path: circle(398px); /* 剪切出一個(gè)半徑為 398px 的圓 */
}

由于圖片寬度設(shè)為了 796px，上述代碼中的半徑 398px 剛好是它的一半。此外還可以使用一個(gè)特殊的關(guān)鍵字實(shí)現(xiàn)相同的效果：circle(farthest-side)。同理，指定 circle(farthest-side) 將調(diào)整圓的大小并覆蓋元素的上下邊緣，只因它們是距離圓心最近的兩條邊。

注意

將屬性 clip-path 的值設(shè)為除了初始值 none 以外的任意合法值后，頁(yè)面會(huì)同步創(chuàng)建一個(gè)新的堆疊上下文（詳見(jiàn)第 6 章相關(guān)內(nèi)容）。

在本例中，剪切出的圓位于元素正中；但您也可以使用 at 關(guān)鍵字以及 x、y 坐標(biāo)對(duì)剪切出的形狀重新定位。這樣，圓心就會(huì)移動(dòng)到新的坐標(biāo)位置。請(qǐng)根據(jù)下列示例代碼更新樣式表并查看頁(yè)面效果：

.clipped {clip-path: circle(229px at 337px 293px);
}

樣式更新后，剪切出的圓就跑到了鷹頭的正中位置，同時(shí)圓的大小也進(jìn)行了調(diào)整，使得圖片大部分區(qū)域都不可見(jiàn)，僅渲染出了鷹的面部與喙。這些 x 和 y 坐標(biāo)的值都是從元素邊框盒（border box）的左上角開(kāi)始測(cè)量的。圓的尺寸和方位可以設(shè)置為百分?jǐn)?shù)。

【譯注】

指定圓心即半徑后的頁(yè)面效果如下圖所示：

【補(bǔ)圖：手動(dòng)調(diào)整剪切圓大小與方位后的頁(yè)面效果及其在原始尺寸中的位置】

此外，還可以使用 ellipse() 函數(shù)來(lái)定義一個(gè)橢圓形的剪切路徑。使用方法與 circle() 函數(shù)類似，區(qū)別在與橢圓函數(shù)需要兩個(gè)尺寸參數(shù)，即垂直方向與水平方向上的半徑。根據(jù)橢圓剪切出的圖片效果如圖 14.8 所示。

【圖 14.8 剪切路徑為橢圓時(shí)的圖片最終效果】

上述效果對(duì)應(yīng)的 CSS 樣式如代碼清單 14.11 所示。請(qǐng)將其同步更新到本地樣式表。

代碼清單 14.11：剪切路徑為橢圓時(shí)的示例樣式代碼

.clipped {clip-path: ellipse(300px 170px at 360px 290px); /* 定義一個(gè)水平半徑 300px、垂直半徑 170px 的橢圓 */
}

值得注意的是，與蒙版特效一樣，剪切路徑的設(shè)置并不會(huì)改變目標(biāo)元素的實(shí)際大小；特效只是隱藏了元素的某些區(qū)域。此時(shí)元素仍然占據(jù)著頁(yè)面原始大小，瀏覽器只是將裁剪遮擋的部分變?yōu)榱丝瞻住?/p>

在絕大多數(shù)實(shí)際項(xiàng)目開(kāi)發(fā)中，往往需要讓剪切圖形的尺寸大小貼近目標(biāo)元素的完整寬高。因此在定義剪輯形狀時(shí)，通常建議先在圖片編輯工具中將圖片裁剪到合適的尺寸，然后再設(shè)置剪切路徑，以便按人們期望的方式來(lái)調(diào)整形狀。

14.3.1 多邊形的裁剪路徑 Polygon clipping paths

利用多邊形函數(shù) polygon() 還可以定義出更復(fù)雜的剪切形狀。該函數(shù)的參數(shù)為任意數(shù)量的 x、y 坐標(biāo)組，各組之間用逗號(hào)分隔；每一組坐標(biāo)都對(duì)應(yīng)一個(gè)多邊形的頂點(diǎn)位置。例如，polygon(50% 0%, 100% 100%, 0% 100%) 就定義了一個(gè)三角形，對(duì)應(yīng)的三個(gè)頂點(diǎn)坐標(biāo)分別為頂部正中的（50% 0%）、右下角的（100% 100%）以及左下角的（0% 100%）。

有了這個(gè)函數(shù)，我們就能根據(jù)想要的效果定義出具有任意頂點(diǎn)的多邊形。代碼清單 14.12 給出了剪切多邊形的另一個(gè)示例。試根據(jù)以下樣式代表同步更新本地樣式表。

代碼清單 14.12 剪切圖形為多邊形的示例樣式代碼

.clipped {clip-path: polygon(380px 50px, 650px 210px, 520px 500px, 20px 360px); /* 定義包含四個(gè)頂點(diǎn)的多邊形 */
}

上述代碼的頁(yè)面效果如圖 14.9 所示。該裁剪路徑形似一個(gè)風(fēng)箏，并且是橫著放置的風(fēng)箏：

【圖 14.9 多邊形的圖片剪切效果】

如本例所示，利用多邊形剪切，我們既可以圍繞圖片的關(guān)鍵部分重塑圖片的可見(jiàn)區(qū)域，也可以在指定部位附近雕刻出有趣的邊框效果。為此，知名前端大牛 Temani Afif 還專門寫了一篇文章演示了不少生動(dòng)案例，深度探討了漸變蒙版和剪切路徑在構(gòu)建趣味邊框特效中的應(yīng)用，詳見(jiàn)：https://mng.bz/7d0v。

提示

推薦一個(gè)非常實(shí)用剪切路徑在線制作工具：CSS clip-path maker。該工具預(yù)設(shè)了大量美觀實(shí)用的剪切圖形效果供人們選用。

譯注

試了一下這款小工具，確實(shí)不錯(cuò)，覺(jué)得有必要補(bǔ)個(gè)截圖：

【補(bǔ)圖：線上剪切路徑特效生成工具 CSS clip-path maker 主頁(yè)面截圖】

14.3.2 Firefox 內(nèi)置的剪切路徑工具 Firefox clip-path tools

編寫剪切路徑的代碼，尤其是多邊形的剪切路徑往往會(huì)十分繁瑣，需要不斷調(diào)整坐標(biāo)值才能達(dá)到預(yù)期效果。為此，Firefox 瀏覽器的開(kāi)發(fā)者工具 DevTools 提供了一個(gè)我認(rèn)為對(duì)與構(gòu)建或微調(diào)剪切路徑特效非常有價(jià)值的可視化編輯工具。略為遺憾的是，目前其他主流瀏覽器暫未內(nèi)置該工具。

在 Firefox 中，右鍵單擊頁(yè)面上設(shè)有剪切路徑的圖片元素并選擇 “檢查（Inspect）” 即可打開(kāi) DevTools 工具。找到目標(biāo)元素的 clip-path 屬性，會(huì)發(fā)現(xiàn)其函數(shù)旁邊有一個(gè)多邊形圖標(biāo)（如圖 14.10 所示）。只要是通過(guò)內(nèi)置函數(shù) circle()、ellipse()、polygon() 以及 inset()（具體用法稍后介紹）定義的任意剪切路徑，都會(huì)出現(xiàn)該圖標(biāo)。

【圖 14.10 點(diǎn)擊多邊形圖標(biāo)來(lái)編輯剪切路徑】

點(diǎn)擊該多邊形圖標(biāo)，將啟用主瀏覽器窗口中的 clip-path 交互式編輯模式。剪切路徑的輪廓用藍(lán)色細(xì)線勾勒，每一個(gè)可以編輯的頂點(diǎn)都會(huì)出現(xiàn)一個(gè)小圓圈，如圖 14.11 所示。點(diǎn)擊并拖動(dòng)其中某個(gè)圓圈就能實(shí)時(shí)編輯圖形，并在 DevTools 的 “規(guī)則” 面板（Rules pane）中看到當(dāng)前的變更情況。

【圖 14.11 Firefox 瀏覽器提供的 clip-path 交互式編輯模式效果】

編輯多邊形時(shí)，每個(gè)頂點(diǎn)處都設(shè)計(jì)了一個(gè)控制手柄（control handle）；雙擊多邊形的某條邊可以新增一個(gè)控制點(diǎn)。編輯圓形時(shí)，我們會(huì)看到兩個(gè)控制手柄：一個(gè)用于移動(dòng)圓心位置，另一個(gè)則在圓的右側(cè)用于調(diào)整半徑大小。橢圓的操作與圓類似，只是在底部會(huì)多出一個(gè)控制點(diǎn)，用于控制橢圓垂直方向上的半徑大小。

14.3.3 其他剪切路徑類型 Other clip-path types

CSS 還提供了幾種其他類型的剪切路徑。這些特效的試驗(yàn)工作就交給各位了：

• inset() —— 根據(jù)指定的大小，從元素邊緣向內(nèi)剪切，將元素剪切為一個(gè)矩形。給定某個(gè)參數(shù)值，例如 inset(15px)，會(huì)從元素的每一條邊向內(nèi)裁剪指定大小。若提供兩個(gè)、三個(gè)或四個(gè)參數(shù)值，則可以獨(dú)立控制各邊剪切量，用法類似 padding 屬性。
• path() —— 根據(jù)指定的 SVG 路徑命令字符串進(jìn)行剪切。例如：path("M68,312C17,239 117,63 223,62C328,61 409,276 370,319C330,365 118,384 68,312Z")。SVG 路徑語(yǔ)法過(guò)于晦澀難懂，難以實(shí)現(xiàn)手動(dòng)編輯；人們往往需要借助矢量編輯軟件進(jìn)行處理，然后將其導(dǎo)出。
• margin-box —— 根據(jù)元素的外邊距盒進(jìn)行剪輯。
• border-box —— 根據(jù)元素的邊框盒進(jìn)行剪輯。
• padding-box —— 根據(jù)元素的內(nèi)邊距盒進(jìn)行剪輯。
• content-box —— 根據(jù)元素的內(nèi)容盒進(jìn)行剪輯。

以上剪切路徑設(shè)置中，最為通用的反倒是 path() 函數(shù)，因?yàn)樵摵瘮?shù)在定義復(fù)雜圖形與曲線方面具備了極為強(qiáng)大的靈活性，遠(yuǎn)超 polygon() 函數(shù)的能力范圍。然而，path() 函數(shù)的靈活應(yīng)用離不開(kāi)矢量編輯軟件的相關(guān)操作經(jīng)驗(yàn)。關(guān)于 SVG 路徑語(yǔ)法的快速入門介紹，可以參考 Chris Coyier 發(fā)表的這篇文章：The SVG path Syntax: An Illustrated Guide，詳見(jiàn)：https://mng.bz/ma0a。

譯注
本以為作者完全放棄了 CSS 浮動(dòng)樣式的介紹，沒(méi)想到會(huì)在下一節(jié)中再次邂逅 float 屬性。不過(guò)這才是 float 屬性的正確打開(kāi)方式。等消化完本節(jié)內(nèi)容后，讓我們稍事休整，一起來(lái)看看新版本會(huì)怎么定位 float 這一古老的 CSS 話題。

---

---

關(guān)于《CSS in Depth》（中譯本書名《深入解析 CSS》）

	第 1 版	第 2 版
讀者評(píng)分	原版：4.7（亞馬遜）；中文版：9.3（豆瓣）	原版：5.0（亞馬遜）；中文版：暫無(wú)，待出版
出版時(shí)間	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暫無(wú)，待出版
原價(jià)	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暫無(wú)，待出版
現(xiàn)價(jià)	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暫無(wú)，待出版
原版國(guó)內(nèi)預(yù)訂	起步價(jià) ￥461.00	起步價(jià) ￥750.00

本專欄為該書第 2 版高分譯文專欄，全網(wǎng)首發(fā)，精譯精校，持續(xù)更新，計(jì)劃今年內(nèi)完成全書翻譯，敬請(qǐng)期待！！！

目前已完結(jié)的章節(jié)（可進(jìn)入本專欄查看詳情，連載期間完全免費(fèi)）：

• 第一章 層疊、優(yōu)先級(jí)與繼承（已完結(jié)）
  • 1.1 層疊
  • 1.2 繼承
  • 1.3 特殊值
  • 1.4 簡(jiǎn)寫屬性
  • 1.5 CSS 漸進(jìn)式增強(qiáng)技術(shù)
  • 1.6 本章小結(jié)
• 第二章 相對(duì)單位（已完結(jié)）
  • 2.1 相對(duì)單位的威力
  • 2.2 em 與 rem
  • 2.3 告別像素思維
  • 2.4 視口的相對(duì)單位
  • 2.5 無(wú)單位的數(shù)值與行高
  • 2.6 自定義屬性
  • 2.7 本章小結(jié)
• 第三章 文檔流與盒模型（已完結(jié)）
  • 3.1 常規(guī)文檔流
  • 3.2 盒模型
  • 3.3 元素的高度
  • 3.4 負(fù)的外邊距
  • 3.5 外邊距折疊
  • 3.6 容器內(nèi)的元素間距問(wèn)題
  • 3.7 本章小結(jié)
• 第四章 Flexbox 布局（已完結(jié)）
  • 4.1 Flexbox 布局原理
  • 4.2 彈性子元素的大小
  • 4.3 彈性布局的方向
  • 4.4 對(duì)齊、間距等細(xì)節(jié)處
  • 4.5 本章小結(jié)
• 第五章 網(wǎng)格布局（已完結(jié)）
  • 5.1 構(gòu)建基礎(chǔ)網(wǎng)格
  • 5.2 網(wǎng)格結(jié)構(gòu)剖析 （上）
    • 5.2.1 網(wǎng)格線的編號(hào)（下）
    • 5.2.2 網(wǎng)格與 Flexbox 配合（下）
  • 5.3 兩種替代語(yǔ)法
    • 5.3.1 命名網(wǎng)格線
    • 5.3.2 命名網(wǎng)格區(qū)域
  • 5.4 顯式網(wǎng)格與隱式網(wǎng)格（上）
    • 5.4.1 添加變化 （中）
    • 5.4.2 讓網(wǎng)格元素填滿網(wǎng)格軌道（下）
  • 5.5 子網(wǎng)格（全新增補(bǔ)內(nèi)容）
  • 5.6 對(duì)齊相關(guān)的屬性
  • 5.7 本章小結(jié)
• 第六章 定位與堆疊上下文（已完結(jié)）
  • 6.1 固定定位
    • 6.1.1 創(chuàng)建一個(gè)固定定位的模態(tài)對(duì)話框
    • 6.1.2 在模態(tài)對(duì)話框打開(kāi)時(shí)防止屏幕滾動(dòng)
    • 6.1.3 控制定位元素的大小
  • 6.2 絕對(duì)定位
    • 6.2.1 關(guān)閉按鈕的絕對(duì)定位
    • 6.2.2 偽元素的定位問(wèn)題
  • 6.3 相對(duì)定位
    • 6.3.1 創(chuàng)建下拉菜單（上）
    • 6.3.2 創(chuàng)建 CSS 三角形（下）
  • 6.4 堆疊上下文與 z-index
    • 6.4.1 理解渲染過(guò)程與堆疊順序（上）
    • 6.4.2 用 z-index 控制堆疊順序（上）
    • 6.4.3 深入理解堆疊上下文（下）
  • 6.5 粘性定位
  • 6.6 本章小結(jié)
• 第七章 響應(yīng)式設(shè)計(jì)（已完結(jié)）
  • 7.1 移動(dòng)端優(yōu)先設(shè)計(jì)原則（上篇）
    • 7.1.1 創(chuàng)建移動(dòng)端菜單（下篇）
    • 7.1.2 給視口添加 meta 標(biāo)簽（下篇）
  • 7.2 媒體查詢（上篇）
    • 7.2.1 深入理解媒體查詢的類型（上篇）
    • 7.2.2 頁(yè)面斷點(diǎn)的添加（中篇）
    • 7.2.3 響應(yīng)式列的添加（下篇）
  • 7.3 流式布局
  • 7.4 響應(yīng)式圖片
  • 7.5 本章小結(jié)
• 第八章 層疊圖層及其嵌套
  • 8.1 用 layer 圖層來(lái)操控層疊規(guī)則（上篇）
    • 8.1.1 圖層的定義（上篇）
    • 8.1.2 圖層的順序與優(yōu)先級(jí)（下篇）
    • 8.1.3 revert-layer 關(guān)鍵字（下篇）
  • 8.2 層疊圖層的推薦組織方案
  • 8.3 偽類 :is() 和 :where() 的用法
  • 8.4 CSS 嵌套的使用
    • 8.4.1 嵌套選擇器的使用
    • 8.4.2 深入理解嵌套選擇器
    • 8.4.3 媒體查詢及其他 @規(guī)則 的嵌套
  • 8.5 本章小結(jié)
• 第九章 CSS 的模塊化與作用域
  • 9.1 模塊的定義
    • 9.1.1 模塊和全局樣式
    • 9.1.2 一個(gè)簡(jiǎn)單的 CSS 模塊
    • 9.1.3 模塊的變體
    • 9.1.4 多元素模塊
  • 9.2 將模塊組合為更大的結(jié)構(gòu)
    • 9.2.1 模塊中多個(gè)職責(zé)的拆分
    • 9.2.2 模塊的命名
  • 9.3 CSS 的作用域
    • 9.3.1 CSS 作用域的就近原則
    • 9.3.2 劃定作用域的邊界
    • 9.3.3 CSS 中的隱式作用域
    • 9.3.4 關(guān)于 CSS 作用域與層疊圖層
  • 9.4 CSS 模式庫(kù)
  • 9.5 本章小結(jié)
• 第十章 CSS 容器查詢
  • 10.1 容器查詢的一個(gè)簡(jiǎn)單示例
    • 10.1.1 容器尺寸查詢的用法
  • 10.2 深入理解容器
    • 10.2.1 容器的類型
    • 10.2.2 容器的名稱
    • 10.2.3 容器與模塊化 CSS
  • 10.3 與容器相關(guān)的單位
  • 10.4 容器樣式查詢的用法
    • 10.4.1 將模塊與所在容器解耦
    • 10.4.2 減少重復(fù)代碼
  • 10.5 本章小結(jié)
• 第 11 章 顏色與對(duì)比
  • 11.1 通過(guò)對(duì)比進(jìn)行交流
    • 11.1.1 模式的建立
    • 11.1.2 還原設(shè)計(jì)稿
  • 11.2 顏色的定義
    • 11.2.1 色域與色彩空間
    • 11.2.2 CSS 顏色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
  • 11.3 利用 OKLCH 處理顏色（上篇）
    • 11.3.4 從頁(yè)面其他顏色衍生出新顏色（下篇）
  • 11.4 思考字體顏色的對(duì)比效果
  • 11.5 本章小結(jié)
• 第 12 章 CSS 排版與間距
  • 12.1 間距設(shè)置
    • 12.1.1 使用 em 還是 px
    • 12.1.2 對(duì)行高的深入思考
    • 12.1.3 行內(nèi)元素的間距設(shè)置
  • 12.2 Web 字體
  • 12.3 谷歌字體
  • 12.4 @font-face 的工作原理
    • 12.4.1 字體格式與回退處理
    • 12.4.2 同一字型的多種變體形式
  • 12.5 性能因素考量
    • 12.5.1 font-display 屬性解析
    • 12.5.2 可變字體的用法
  • 12.6 調(diào)整字間距，提升可讀性
    • 12.6.1 正文的字間距
    • 12.6.2 標(biāo)題、小元素和間距
  • 12.7 本章小結(jié)
• 第 13 章 漸變、陰影與混合模式
  • 13.1 漸變
    • 13.1.1 使用多個(gè)顏色節(jié)點(diǎn)（上）
    • 13.1.2 顏色插值方法（中）
    • 13.1.3 徑向漸變（下）
    • 13.1.4 錐形漸變（下）
  • 13.2 陰影
    • 13.2.1 利用漸變和陰影打造立體感
    • 13.2.2 使用扁平化設(shè)計(jì)創(chuàng)建元素
    • 13.2.3 創(chuàng)建混合風(fēng)格的按鈕外觀
  • 13.3 混合模式
    • 13.3.1 為圖片上色
    • 13.3.2 混合模式的類型
    • 13.3.3 圖片紋理的添加
    • 13.3.4 融合混合模式的用法
  • 13.4 本章小結(jié)
• 附錄
  • 附錄A：CSS 選擇器參考
  • 附錄B：CSS 預(yù)處理器簡(jiǎn)介