CSS邊框

如何在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舉一個真實的例子

樣式的默認值為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欺騙邊框圖像上的年曆條目欲獲得更多信息。

免費下載我的CSS手冊