本頁面由 Cloud Translation API 翻譯而成。

使用 CSS's clip-path 屬性建立有趣的圖片形狀

使用 CSS 中的裁剪功能，可避免設計中的所有內容看起來像是方塊。使用各種基本圖形或 SVG 時，您可以建立裁剪路徑。然後裁剪不想顯示的元素部分。

Rachel Andrew

網頁上的元素全都是在矩形方塊中定義。不過，這並不代表我們必須讓所有內容都看起來像方塊。您可以使用 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 值，讓文字在該形狀周圍換行。

注意： 請注意，CSS 形狀只能套用至浮動元素。clip-path 屬性不需要元素浮動。

基本形狀的完整清單如下：

inset() 值會從元素邊緣內縮裁剪區域，並可傳遞頂端、右側、底部和左側邊緣的值。您也可以使用 round 關鍵字，將 border-radius 加入裁剪區域的邊角。

在我的範例中，我有兩個方塊，兩者都含有 .box 類別。第一個方塊沒有裁剪，第二個方塊則使用 inset() 值進行裁剪。

如您所見，circle() 值會建立圓形裁剪區域。第一個值是長度或百分比，也是圓的半徑。第二個選用值可讓您設定圓形的中心。在下例中，我使用關鍵字值在右上方設定剪裁圓圈。您也可以使用長度或百分比。

請注意，當您設定所有這些值時，形狀會遭到元素邊界框的裁剪。如果您在圖片上建立一個圓形，該形狀會延伸到圖片自然尺寸之外，就會看到平坦的邊緣。

橢圓形基本上是正方形，其運作方式與 circle() 非常類似，但可接受 x 的半徑和 y 的半徑，再加上橢圓形中心的值。

polygon() 值可協助您建立相當複雜的形狀，只要設定各個點的座標，即可視需要定義任意數量的點。

如要建立多邊形並查看可能的選項，請查看 Clippy，這是 clip-path 產生器，然後將程式碼複製並貼到專案中。

在 CSS 形狀中亦定義為方塊值中的形狀。這些屬性與 CSS 盒模型相關，包括內容方塊、邊框間距方塊、邊框方塊和邊距方塊，其關鍵字值分別為 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 屬性中使用框架值。但 shape-outside 支援這類功能。

如要進一步控管裁剪區域 (比基本形狀更精細)，請使用 SVG clipPath 元素。然後參照該 ID，並使用 url() 做為 clip-path 的值。

您可以將 CSS 轉場效果和動畫套用至 clip-path，以產生一些有趣的效果。在下一個範例中，我會在滑鼠游標經過時為圓形製作動畫，方法是透過兩個半徑值不同的圓形進行轉換。

動畫與裁剪的搭配方式有很多種，在 CSS Tricks 上使用裁剪路徑製作動畫相關構想，

相片來源：Matthew Henry 在 Burst 上發布。