CSS 邊框 · W3School HTML & CSS 教程

# CSS 邊框 **元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。** **CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。** ## CSS 邊框在 HTML 中，我們使用表格來創建文本周圍的邊框，但是通過使用 CSS 邊框屬性，我們可以創建出效果出色的邊框，并且可以應用于任何元素。元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細講解這三個方面。 ## 邊框與背景 CSS 規范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。 CSS2 指出背景只延伸到內邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內容、內邊距和邊框區的背景。大多數瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現。 ## 邊框的樣式樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。 CSS 的 [border-style 屬性](/cssref/pr_border-style.asp)定義了 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](/cssref/pr_border-top_style.asp "CSS border-top-style 屬性") * [border-right-style](/cssref/pr_border-right_style.asp "CSS border-right-style 屬性") * [border-bottom-style](/cssref/pr_border-bottom_style.asp "CSS border-bottom-style 屬性") * [border-left-style](/cssref/pr_border-left_style.asp "CSS border-left-style 屬性") 因此這兩種方法是等價的： ``` p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;} ``` 注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。 ## 邊框的寬度您可以通過 [border-width 屬性](/cssref/pr_border-width.asp "CSS 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](/cssref/pr_border-top_width.asp "CSS border-top-width 屬性") * [border-right-width](/cssref/pr_border-right_width.asp "CSS border-right-width 屬性") * [border-bottom-width](/cssref/pr_border-bottom_width.asp "CSS border-bottom-width 屬性") * [border-left-width](/cssref/pr_border-left_width.asp "CSS 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 屬性](/cssref/pr_border-color.asp "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](/cssref/pr_border-top_color.asp "CSS border-top-color 屬性") * [border-right-color](/cssref/pr_border-right_color.asp "CSS border-right-color 屬性") * [border-bottom-color](/cssref/pr_border-bottom_color.asp "CSS border-bottom-color 屬性") * [border-left-color](/cssref/pr_border-left_color.asp "CSS 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;} ``` 如需查看以上樣式的效果，請點擊：。從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當于內邊距，因為元素的背景會延伸到邊框區域（如果有可見背景的話）。重要事項：在 IE7 之前，IE/WIN 沒有提供對 transparent 的支持。在以前的版本，IE 會根據元素的 color 值來設置邊框顏色。 ## CSS 邊框實例： [所有邊框屬性在一個聲明之中](/tiy/t.asp?f=csse_border) [設置四邊框樣式](/tiy/t.asp?f=csse_border-style) [設置每一邊的不同邊框](/tiy/t.asp?f=csse_border-style2) [所有邊框寬度屬性在一個聲明之中](/tiy/t.asp?f=csse_border-width) [設置四個邊框的顏色](/tiy/t.asp?f=csse_border-color) [所有下邊框屬性在一個聲明中](/tiy/t.asp?f=csse_border-bottom) [設置下邊框的顏色](/tiy/t.asp?f=csse_border-bottom-color) [設置下邊框的樣式](/tiy/t.asp?f=csse_border-bottom-style) [設置下邊框的寬度](/tiy/t.asp?f=csse_border-bottom-width) [所有左邊框屬性在一個聲明之中](/tiy/t.asp?f=csse_border-left) [設置左邊框的顏色](/tiy/t.asp?f=csse_border-left-color) [設置左邊框的樣式](/tiy/t.asp?f=csse_border-left-style) [設置左邊框的寬度](/tiy/t.asp?f=csse_border-left-width) [所有右邊框屬性在一個聲明之中](/tiy/t.asp?f=csse_border-right) [設置右邊框的顏色](/tiy/t.asp?f=csse_border-right-color) [設置右邊框的樣式](/tiy/t.asp?f=csse_border-right-style) [設置右邊框的寬度](/tiy/t.asp?f=csse_border-right-width) [所有上邊框屬性在一個聲明之中](/tiy/t.asp?f=csse_border-top) [設置上邊框的顏色](/tiy/t.asp?f=csse_border-top-color) [設置上邊框的樣式](/tiy/t.asp?f=csse_border-top-style) [設置上邊框的寬度](/tiy/t.asp?f=csse_border-top-width) ## CSS 邊框屬性 | 屬性 | 描述 | | --- | --- | | [border](/cssref/pr_border.asp "CSS border 屬性") | 簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。 | | [border-style](/cssref/pr_border-style.asp "CSS border-style 屬性") | 用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。 | | [border-width](/cssref/pr_border-width.asp "CSS border-width 屬性") | 簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。 | | [border-color](/cssref/pr_border-color.asp "CSS border-color 屬性") | 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。 | | [border-bottom](/cssref/pr_border-bottom.asp "CSS border-bottom 屬性") | 簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。 | | [border-bottom-color](/cssref/pr_border-bottom_color.asp "CSS border-bottom-color 屬性") | 設置元素的下邊框的顏色。 | | [border-bottom-style](/cssref/pr_border-bottom_style.asp "CSS border-bottom-style 屬性") | 設置元素的下邊框的樣式。 | | [border-bottom-width](/cssref/pr_border-bottom_width.asp "CSS border-bottom-width 屬性") | 設置元素的下邊框的寬度。 | | [border-left](/cssref/pr_border-left.asp "CSS border-left 屬性") | 簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。 | | [border-left-color](/cssref/pr_border-left_color.asp "CSS border-left-color 屬性") | 設置元素的左邊框的顏色。 | | [border-left-style](/cssref/pr_border-left_style.asp "CSS border-left-style 屬性") | 設置元素的左邊框的樣式。 | | [border-left-width](/cssref/pr_border-left_width.asp "CSS border-left-width 屬性") | 設置元素的左邊框的寬度。 | | [border-right](/cssref/pr_border-right.asp "CSS border-right 屬性") | 簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。 | | [border-right-color](/cssref/pr_border-right_color.asp "CSS border-right-color 屬性") | 設置元素的右邊框的顏色。 | | [border-right-style](/cssref/pr_border-right_style.asp "CSS border-right-style 屬性") | 設置元素的右邊框的樣式。 | | [border-right-width](/cssref/pr_border-right_width.asp "CSS border-right-width 屬性") | 設置元素的右邊框的寬度。 | | [border-top](/cssref/pr_border-top.asp "CSS border-top 屬性") | 簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。 | | [border-top-color](/cssref/pr_border-top_color.asp "CSS border-top-color 屬性") | 設置元素的上邊框的顏色。 | | [border-top-style](/cssref/pr_border-top_style.asp "CSS border-top-style 屬性") | 設置元素的上邊框的樣式。 | | [border-top-width](/cssref/pr_border-top_width.asp "CSS border-top-width 屬性") | 設置元素的上邊框的寬度。 |