在 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()
值會從元素邊緣插入裁剪區域。
並且可以傳遞頂端、右側、底部和左側邊緣的值。
也可以新增 border-radius
至裁剪區域的角落、
與回應相關。round
在我的範例中,我有兩個方塊,兩者都含有 .box
類別。第一個方塊沒有裁剪,第二個方塊則使用 inset()
值進行裁剪。
circle()
如您所見,circle()
值會建立圓形裁剪區域。
第一個值是長度或百分比,也是圓的半徑。第二個選用值可讓您設定圓形的中心。
在以下範例中,我使用關鍵字值來設定裁剪的圓形右上方。你也可以使用長度或百分比。
留意平坦的邊緣!
請注意,這裡的所有這些值都會被元素邊界方塊裁切。 如果你在圖片上建立圓形, 這樣形狀會超出圖片自然大小,就會得到扁平的邊線
ellipse()
橢圓形基本上是扁平的圓形,因此與 circle()
的運作方式非常相似,但會接受 x 和 y 的半徑,以及橢圓形中心的值。
polygon()
polygon()
值可協助你建立相當複雜的形狀。
定義數量不限
設定每個點的座標
為了協助你建立多邊形,請參閱 Clippy 範例,
clip-path
產生器
然後複製程式碼並貼到自己的專案中
方塊值的形狀
在 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 元素
如果想進一步控制裁剪區域,可以使用基本形狀
請使用 SVG clipPath
元素。
然後使用 url()
做為 clip-path
的值來參照該 ID。
為裁剪區域製作動畫
可以為 clip-path
套用 CSS 轉場效果和動畫,創造有趣的效果。
在下方範例中,我們要在兩個半徑不同的圓形之間轉換,讓遊標懸停在圓圈上加上動畫效果。
有許多別具創意的方法可將動畫用於剪輯。 在 CSS Tricks 上使用裁剪路徑製作動畫相關構想,
相片來源:Matthew Henry 發表了 Burst。