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-widthborder-right-widthborder-bottom-widthborder-left-width

邊框顏色

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

如果未設置顏色,則默認情況下,邊框將使用元素中文本的顏色進行著色。

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

例子:

p {
  border-color: yellow;
}

您可以使用4個值分別設置每個邊緣的顏色(上-右-下-左):

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

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

邊境簡寫屬性

提到的那3個屬性,border-widthborder-styleborder-color可以使用簡寫屬性設置border

例子:

p {
  border: 2px black solid;
}

您還可以使用特定於邊緣的屬性border-topborder-rightborder-bottomborder-left

例子:

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

邊界半徑

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

用法:

p {
  border-radius: 3px;
}

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

使用圖像作為邊框

有邊框的一件很酷的事情是使用圖像對它們進行樣式設置的能力。這使您可以非常有創意地使用邊框。

我們有5個屬性:

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

和速記border-image。由於邊框需要像我在本小章中可以做的那樣更深入地介紹,因此在這裡我將不做詳細介紹。我建議閱讀CSS欺騙邊框圖像上的年曆條目欲獲得更多信息。

免費下載我的CSS手冊


更多CSS教程: