Design Code 設計密碼

元素的邊框(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 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

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

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

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

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

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

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

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。

定義單邊顏色

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

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

要為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;
  <code>border-color: transparent;</code>
  }
a:hover {border-color: gray;}
	

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

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