認識CSS屬性之clip-path

Web 頁面以長方形為主，相比之下，平面媒體在形狀方面更具多樣性。造成這種差異的原因之一就是，在 web 頁面開發中缺少像平面媒體中那樣合適的工具。

本文會帶你認識 clip-path 屬性，這個屬性使你能夠隱藏元素的某部分，可見區域由設定的引數值所控制。我們先學習基本概念，而後介紹 clip-path 語法，最後來看下更高深的概念。

基本概念

Clipping （裁剪）就是從某物上修剪下一塊。在前端中，clipping 就是一種整體或部分地隱藏頁面元素的操作。關於 clipping，本文還會提及其它兩個概念：clipping path（剪裁路徑）和 clipping region（剪裁區域）。

Clipping path 是用來裁剪元素的路徑，可以標記出 clipping region。clipping path 可以是基礎形狀或者是複雜的多邊路徑。而 clipping path 圍起來的區域就是 clipping region 了。

瀏覽器會裁剪掉 clipping region 以外的區域，不僅是背景及其它類似的內容，也包括 border、text-shadow 等。更讚的是，瀏覽器不會捕獲元素 clipping region 以外的 hover、click 等事件。

即使如今一些特定元素不受長方形限制，但實際上元素周圍的內容還是會認為元素是原始形狀（長方形）的，並按此進行文件流的佈局。要想使周圍元素根據元素裁剪後的形狀進行佈局，可以使用 shape-outside 屬性。這個屬性的詳細資訊可以移步 這篇 SitePoint 教程 。

注意，請不要將這個屬性與 clip 屬性 混淆。一般情況下請避免使用 clip 屬性，因為它受諸多限制並且只支援長方形裁剪。

語法及使用

使用這個屬性的正確語法如下：

上述屬性值包括：

clip-source 可以是內、外部的 SVG <clipPath> 元素的 URL 引用。

basic-shape 可以是 CSS Shapes 說明 中定義的基礎形狀函式。

geometry-box 是可選的引數。此引數和 basic-shape 函式一起使用時，可以為 basic-shape 的裁剪工作提供參考盒子。如果 geometry-box 由自身指定，那麼它會使用指定盒子的形狀作為裁剪的路徑，包括任何（由 border-radius 屬性提供的）角的形狀。我們稍後會詳細說明。

現在來看看下面使用基礎形狀函式的 CSS 程式碼：

這段程式碼會將所有的圖片裁剪為菱形。但是為什麼圖片會被裁剪為菱形而不是梯形或平行四邊形呢？這取決於函式中的頂點值。下圖說明了生成多邊形裁剪路徑的規則：

 

每個點的第一個座標值決定了它在 x 軸上的位置，第二個座標值指定了它在 y 軸的位置，所有點是順時針繪製的。比如菱形最右邊的點，它位於 y 軸下方一半處，所以它的 y 座標是 50%。同時這個點位於 x 軸的最右側，所以它的 x 座標是 100%。其它點的座標同理可得。

利用 geometry-box 裁剪元素

當裁剪 HTML 元素時，geometry-box（或參考盒子）可以是 margin-box、border-box、padding-box 或 content-box。geometry-box 的用法如下：

在上例中，元素的 margin-box 會作為參考，來決定裁剪點的實際位置。點（10%，10%）是 margin-box 的左上角，所以 clip-path 的定位會根據此點進行計算。

裁剪 SVG 元素的情況下，geometry-box 可以是 fill-box、stroke-box 和 view-box。view-box 值在沒有指定的情況下，預設採用最近的 SVG 視口作為參考盒子。

clip-path 的使用

這個屬性可以用來做一些有趣的事。首先，它可以改善文字內容。讓我們來看一下下面的圖片，標題的背景和第二段都使用了 clip-path 屬性：

使用漸變或其它類似技術可以很容易地實現第一個背景。但是沒有 clip-path 的幫助，生成第二個背景就沒那麼容易了。注意，訊息框樣式背景底部的線不是水平的，而有一點傾斜。使用 clip-path 實現這個效果只需一行簡單的 CSS 程式碼：

背景有 7 個頂點，這在多邊形的 clip-path 中有所體現。也許你會問我是怎樣得出這些座標的。這個問題我會留給讀者們解決，這樣可以幫助你們更好地理解概念。開啟下面的 CodePen 可以看到實現程式碼：

你也可以用這個屬性將圖片裁剪成不同的形狀，並加點 CSS 來將它們排列的更加炫酷。畫廊中的縮圖不必是長方形的，使用者頭像的形狀也可以隨心所欲。本文將圖片做成菱形的。因為所有的圖片都是基礎菱形的，所以可以共用 clip-path 的值。下面是最右側圖片的 CSS 程式碼：

使用 clip-path 的圖片效果如下：

clip-path 還可以做更多的事——你可以做出奇形怪狀的按鈕，或給導航選單新增好玩的 hover 效果，只有想不到，沒有做不到！

新增動畫

這個屬性也可以與動畫相結合。但是必須記住，最後形狀的頂點數必須和初始形狀的頂點數相同。這很重要，否則瀏覽器會不知道在哪新增多餘的頂點（或是從哪移除頂點）。如下 CSS 程式碼為梯形新增了動畫：

在動畫的最後一段，梯形會變成三角形。如上文提到的，我們不能改變頂點的數目還指望著動畫會是平滑的，改變頂點數目會造成動畫過渡生硬。為了解決這個問題，我在最後一個多邊形中把前兩個頂點設定為相同的，這樣四邊形就可以完美的轉換為三角形了。

瀏覽器支援性

IE 和 Edge 不支援這個屬性。Firefox 僅部分支援 clip-path （它只支援 url() 語法）。但是 47 以上的版本，啟用 Firefox 的 layout.css.clip-path-shapes.enabled 選項就可以支援這個屬性了。

Chrome、Safari 和 Opera 需要使用 -webkit- 字首支援此屬性。不幸的是，它們還不支援外部的 SVG 形狀。更多瀏覽器支援性資訊可以訪問 Can I Use 。

總結

本文介紹了有關 clip-path 的基本內容，可以幫助你入門。學習使用這個屬性並不會花費太多的時間，但是創造性的使用就需要多多練習了。當瀏覽器廣泛支援此屬性時，你就可以使用 clip-path 製作出酷炫的效果了。

此外還有兩款工具值得介紹——Bennett Feely 的 clippy 和 CSS Plant 的 clip path 生成器 。它們可以為你創造複雜的多邊形路徑帶來方便。

你用clip-path做出過什麼炫酷的作品嗎？請在留言中提供連結。

打賞支援我翻譯更多好文章，謝謝！

打賞譯者