如何使用遮罩圖像在 CSS 中建立僅角邊框？

使用 CSS 實現僅角邊框

創建具有視覺吸引力的設計時，添加邊框至關重要。但是，如果您只想在元素的角落上設定邊框怎麼辦？這可以透過 CSS 的創新使用來實現。

挑戰

要建立僅限角落的邊框，您可以使用多個邊框並精確定位它們。然而，這種方法實施起來可能很乏味且複雜。

解決方案

更優雅的解決方案涉及使用遮罩影像。它的運作原理如下：

1. 建立實心邊框：首先，使用 border 屬性定義實心邊框。
2. 使用遮罩影像： 接下來，使用 -webkit-mask 屬性應用圓錐漸層遮罩。此遮罩隱藏除指定角落之外的所有邊框。
3. 新增填充： 若要在邊框和內容之間建立間隙，請使用 padding 屬性新增填充。
4. 設定角大小：透過調整蒙版中的 --s 變數來自訂角的大小定義。

範例程式碼

這裡有一個範例程式碼片段來示範該技術：

img {
  --s: 50px; /* the size on the corner */
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

透過使用此CSS 技術，您可以輕鬆實現乾淨且具有視覺吸引力的僅角落邊框。

以上是如何使用遮罩圖像在 CSS 中建立僅角邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！