如何在 CSS 中建立僅角邊框？

使用 CSS 建立角邊框

在 CSS 中，可以透過僅在元素的角落顯示邊框來實現獨特的外觀。此效果通常在設計中用於創建裝飾框架或強調特定區域。

CSS 解決方案

以下是創建僅角邊框的代碼片段：

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;
}

說明

此解決方案利用-webkit-mask 屬性創建圓錐漸層。漸層由兩個不同的顏色停止點定義：一個在轉角處 (75%)，一個在開頭處 (0%)。透過套用此蒙版，除了角落之外的邊框都被有效隱藏。

修改

要調整角落的大小，只需修改 -- 的值s 變數。此外，您可以根據需要自訂邊框粗細和顏色。

替代解決方案

一些CSS庫，例如PureCSS，提供預先定義為僅角邊框構建了 CSS 類。這種方法進一步簡化了程式碼：

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

透過使用 border-corner-only 類別將圖像包裝在元素中，您可以輕鬆應用角邊框，而不需要任何複雜的遮罩技術。

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