在 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()
值會建立一個圓形裁剪區域。第一個值是長度或百分比,且是圓形的半徑。第二個選用值可讓您設定圓形中心。在下方範例中,我使用關鍵字值將我的裁剪圓形設為右上方。您也可以使用長度或百分比。
注意平坦的邊緣!
請注意,這些值全都會遭到元素邊界方塊裁切。 如果在圖片上建立圓形,且該形狀會延伸至圖片自然大小之外,您就會得到平坦的邊緣。
![平滑的夾扣圓](https://web.dev/static/articles/css-clipping/image/a-clipped-circle-flat-ed-92eec3384f5d2.jpg?authuser=7&hl=zh-tw)
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 評論。