在 CSS 中使用剪輯功能，我們就可以將設計的所有元素移除，看起來像方塊。使用各種基本圖形或 SVG 格式，即可建立裁剪路徑。接著剪掉不想顯示的元素部分。
網頁上的元素全都是由矩形方塊定義。然而，這並不表示我們必須讓一切看起來都像盒子。您可以使用 CSS clip-path 屬性剪輯圖片或其他元素的部分內容，創造有趣的效果。
在上述範例中，說明框圖片為正方形 (來源)。
使用 clip-path 和 circle() 的基本形狀值，會裁剪說明框周圍的額外天空，讓使用者在頁面上留下圓形圖片。
圖片是連結，因此您可以查看 clip-path 屬性的其他內容。使用者只能點選圖片的可見區域，因為系統不會在圖片的隱藏部分觸發事件。
裁剪功能可套用至任何 HTML 元素，而不只是圖片。建立 clip-path 的方法有很多種，我們將在本文中介紹這些方法。
瀏覽器相容性
對舊版瀏覽器而言，備用做法可能會讓瀏覽器忽略 clip-path 屬性，並顯示未裁剪的圖片。
如果發生這種情況，您可以在功能查詢中測試 clip-path，並提供不支援瀏覽器的替代版面配置。
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
基本形狀
clip-path 屬性可接受多個值。初始範例中使用的值為 circle()。這是其中一種基本形狀值，詳情請參閱 CSS 形狀規格。也就是說，您可以裁剪某個區域，並使用相同的 shape-outside 值，讓文字繞著該形狀。
基本形狀的完整清單如下：
inset()
inset() 值會從元素邊緣插入裁剪區域，且可以傳遞頂端、右側、底部和左側邊緣的值。您也可以使用 round 關鍵字，將 border-radius 新增至裁剪區域的邊角。
在這個範例中，我有兩個包含 .box 類別的方塊，第一個方塊沒有裁剪，第二個方塊會使用 inset() 值裁剪。
circle()
如您所見，circle() 值會建立一個圓形裁剪區域。第一個值是長度或百分比，且是圓形的半徑。第二個選用值可讓您設定圓形中心。在下方範例中，我使用關鍵字值將我的裁剪圓形設為右上方。您也可以使用長度或百分比。
注意平坦的邊緣！
請注意，這些值全都會遭到元素邊界方塊裁切。 如果在圖片上建立圓形，且該形狀會延伸至圖片自然大小之外，您就會得到平坦的邊緣。
circle(50%)，這是因為圖片不是正方形，因此我們按了頂端和底部的邊界方塊，而圓圈遭到裁切。ellipse()
橢圓基本上是方形的圓形，因此運作方式與 circle() 非常類似，但允許使用 x 半徑和 y 的半徑，再加上橢圓的中心值。
polygon()
polygon() 值可協助您建立相當複雜的形狀，藉由設定每個點的座標，定義所需的點數量。
可協助您建立多邊形並瞭解可能的功能，請參閱 Clippy 這款 clip-path 產生器，然後將程式碼複製及貼到自己的專案中。
方塊值的形狀
CSS 形狀也定義為來自方塊值的形狀。這些修飾符與 CSS Box 模型相關，也就是內容方塊、邊框間距方塊、邊框方塊，以及關鍵字值為 content-box、border-box、padding-box 和 margin-box 的邊界方塊。
這些值可以單獨使用，也可以與基本形狀一起使用，以定義形狀使用的參照方塊。例如，下列程式碼會將形狀裁剪為內容的邊緣。
.box {
clip-path: content-box;
}
在這個範例中，圓形會使用 content-box 做為參考方塊，而不是 margin-box (預設值)。
.box {
clip-path: circle(45%) content-box;
}
瀏覽器目前不支援使用 clip-path 屬性的 Box 值。不過，這些程式庫支援 shape-outside。
使用 SVG 元素
如要進一步控制裁剪區域，請使用 SVG clipPath 元素。接著參照該 ID，將 url() 做為 clip-path 的值。
為剪裁區域建立動畫
您可以對 clip-path 套用 CSS 轉場效果和動畫，創造出有趣的效果。我在下方範例中，為了將遊標懸停在圓圈上，而在兩個圓形之間轉換不同的半徑值。
你可以透過許多創意的方式使用動畫剪輯。在 CSS 秘訣中使用 clip-path 建立動畫：
相片來源：Matthew Henry 的 Burst 評論。