框模型：CSS 邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

CSS 邊框

在 HTML 中，我們使用表格來創建文本周圍的邊框，但是通過使用 CSS 邊框屬性，我們可以創建出效果出色的邊框，并且可以應用于任何元素。

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。

每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細講解這三個方面。

邊框與背景

CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。

CSS2 指出背景只延伸到內邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。

邊框的樣式

樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。

CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。

例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：

a:link img {border-style: outset;}

定義多種樣式

您可以為一個邊框定義多個樣式，例如：

p.aside {border-style: solid dotted dashed double;}

上面這條規則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。

我們又看到了這里的值采用了 top-right-bottom-left 的順序，討論用多個值設置不同內邊距時也見過這個順序。

定義單邊樣式

如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

因此這兩種方法是等價的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

邊框的寬度

您可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。

注釋：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等于 5px、3px 和 2px，而另一個用戶代理則分別設置為 3px、2px 和 1px。

所以，我們可以這樣設置邊框的寬度：

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}

定義單邊寬度

您可以按照 top-right-bottom-left 的順序設置元素的各邊邊框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以簡寫為（這樣寫法稱為值復制）：

p {border-style: solid; border-width: 15px 5px;}

您也可以通過下列屬性分別設置邊框各邊的寬度：

因此，下面的規則與上面的例子是等價的：

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

沒有邊框

在前面的例子中，您已經看到，如果希望顯示某種邊框，就必須設置邊框樣式，比如 solid 或 outset。

那么如果把 border-style 設置為 none 會出現什么情況：

p {border-style: none; border-width: 50px;}

盡管邊框的寬度是 50px，但是邊框樣式設置為 none。在這種情況下，不僅邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，為什么呢？

這是因為如果邊框樣式為 none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論您原先定義的是什么。

記住這一點非常重要。事實上，忘記聲明邊框樣式是一個常犯的錯誤。根據以下規則，所有 h1 元素都不會有任何邊框，更不用說 20 像素寬了：

h1 {border-width: 20px;}

由于 border-style 的默認值是 none，如果沒有聲明樣式，就相當于 border-style: none。因此，如果您希望邊框出現，就必須聲明一個邊框樣式。

邊框的顏色

設置邊框顏色非常簡單。CSS 使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值。

可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值：

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

如果顏色值小于 4 個，值復制就會起作用。例如下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色：

p {
  border-style: solid;
  border-color: blue red;
  }

注釋：默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。

定義單邊顏色

還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：

要為 h1 元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

透明邊框

我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。

CSS2 引入了邊框顏色值 transparent。這個值用于創建有寬度的不可見邊框。請看下面的例子：

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

我們為上面的鏈接定義了如下樣式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

親自試一試

從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當于內邊距，因為元素的背景會延伸到邊框區域（如果有可見背景的話）。

重要事項：在 IE7 之前，IE/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據元素的 color 值來設置邊框顏色。

CSS 邊框實例：

所有邊框屬性在一個聲明之中
本例演示用簡寫屬性來將所有四個邊框屬性設置于同一聲明中。
設置四邊框樣式
本例演示如何設置四邊框樣式。
設置每一邊的不同邊框
本例演示如何在元素的各邊設置不同的邊框。
所有邊框寬度屬性在一個聲明之中
本例演示用簡寫屬性來將所有邊框寬度屬性設置于同一聲明中。
設置四個邊框的顏色
本例演示如何設置四個邊框的顏色。可以設置一到四個顏色。
所有下邊框屬性在一個聲明中
本例演示用簡寫屬性來將所有下邊框屬性設置在同一聲明中。
設置下邊框的顏色
本例演示如何設置下邊框的顏色。
設置下邊框的樣式
本例演示如何設置下邊框的樣式。
設置下邊框的寬度
本例演示如何設置下邊框的寬度。
所有左邊框屬性在一個聲明之中
所有左邊框屬性在一個聲明之中
設置左邊框的顏色
本例演示如何設置左邊框的顏色。
設置左邊框的樣式
本例演示如何設置左邊框的樣式。
設置左邊框的寬度
本例演示如何設置左邊框的寬度。
所有右邊框屬性在一個聲明之中
本例演示一個簡寫屬性，用于把所有右邊框屬性設置在一條聲明中。
設置右邊框的顏色
本例演示如何設置右邊框的顏色。
設置右邊框的樣式
本例演示如何設置右邊框的樣式。
設置右邊框的寬度
本例演示如何設置右邊框的寬度。
所有上邊框屬性在一個聲明之中
本例演示用簡寫屬性來將所有上邊框屬性設置于同一聲明之中。
設置上邊框的顏色
本例演示如何設置上邊框的顏色。
設置上邊框的樣式
本例演示如何設置上邊框的樣式。
設置上邊框的寬度
本例演示如何設置上邊框的寬度。

CSS 邊框屬性

屬性 描述
border 簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。
border-style 用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
border-width 簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-bottom 簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。
border-bottom-color 設置元素的下邊框的顏色。
border-bottom-style 設置元素的下邊框的樣式。
border-bottom-width 設置元素的下邊框的寬度。
border-left 簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。
border-left-color 設置元素的左邊框的顏色。
border-left-style 設置元素的左邊框的樣式。
border-left-width 設置元素的左邊框的寬度。
border-right 簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。
border-right-color 設置元素的右邊框的顏色。
border-right-style 設置元素的右邊框的樣式。
border-right-width 設置元素的右邊框的寬度。
border-top 簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。
border-top-color 設置元素的上邊框的顏色。
border-top-style 設置元素的上邊框的樣式。
border-top-width 設置元素的上邊框的寬度。