如何透過CSS處理邊框

邊框是在內邊距和外邊距之間的一層薄紗。透過編輯邊框，可以讓元素在螢幕上繪製其周邊。

你可以透過以下屬性來處理邊框：

  • border-style
  • border-color
  • border-width

屬性border可以作為所有這些屬性的快捷方式使用。

border-radius用於創建圓角。

還可以使用圖像作為邊框，使用border-image及其特定的分開屬性來實現。

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

讓我們從border-style開始。

邊框樣式

border-style屬性允許您選擇邊框的樣式。您可以使用的選項有：

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

在此Codepen中查看實例：https://codepen.io/flaviocopes/pen/yraaxq

樣式的默認值是none，所以要使邊框完全顯示，您需要將其更改為其他樣式。大多數情況下，solid是個不錯的選擇。

您可以使用以下屬性為每個邊緣設置不同的樣式：

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

或者，您可以使用具有多個值的border-style來定義它們，使用常規的上-右-下-左順序：

p {
 border-style: solid dotted solid dotted;
}

邊框寬度

border-width用於設置邊框的寬度。

您可以使用預定義的值之一：

  • thin
  • medium（默認值）
  • thick

或者，使用像素、em、rem或任何其他有效的長度值來表示值。

示例：

p {
 border-width: 2px;
}

您可以使用4個值來分別設置每個邊緣（上-右-下-左）的寬度：

p {
 border-width: 2px 1px 2px 1px;
}

或者，您可以使用特定的邊緣屬性border-top-width、border-right-width、border-bottom-width、border-left-width。

邊框顏色

border-color用於設置邊框的顏色。

如果您不設置顏色，邊框默認使用元素中文本的顏色。

您可以將任何有效的顏色值傳遞給border-color。

示例：

p {
 border-color: yellow;
}

您可以使用4個值來分別設置每個邊緣（上-右-下-左）的顏色：

p {
 border-color: black red yellow blue;
}

或者，您可以使用特定的邊緣屬性border-top-color，border-right-color，border-bottom-color，border-left-color。

邊框的簡略屬性

前面提到的這3個屬性，border-width，border-style和border-color可以使用簡略屬性border來設置。

示例：

p {
 border: 2px black solid;
}

您還可以使用特定邊緣的屬性border-top，border-right，border-bottom，border-left。

示例：

p {
 border-left: 2px black solid;
 border-right: 3px red dashed;
}

邊框半徑

border-radius用於為邊框設置圓角。您需要傳遞一個值，該值將用於圓角的半徑值。

用法：

p {
 border-radius: 3px;
}

您還可以使用特定邊緣的屬性border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius。

使用圖像作為邊框

邊框的一個很酷的功能是使用圖像來設計邊框。這使得您可以在邊框上進行創意設計。

我們有5個屬性：

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

還有簡略屬性border-image。我不會在這裡詳述，因為使用圖像作為邊框需要更深入的探討，這超出了我在這篇小節中所能做的範圍。我建議閱讀CSS Tricks關於border-image的專題https://css-tricks.com/almanac/properties/b/border-image/以獲取更多資訊。