CSS 框線
元素的框線 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素框線的樣式、寬度和顏色。
在 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;
border-color: transparent;
}
a:hover {border-color: gray;}
如需查看以上樣式的效果，請點擊：TIY。
從某種意義上說，利用 transparent，使用框線就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明框線相當於內邊距，因為元素的背景會延伸到框線區域（如果有可見背景的話）。
重要事項：在 IE7 之前，IE/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據元素的 color 值來設定框線顏色。
