CSS 邊框
CSS 邊框
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
CSS 邊框
在 HTML 中，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用 CSS 邊框?qū)傩裕覀兛梢詣?chuàng)建出效果出色的邊框，并且可以應用于任何元素。
元素外邊距內(nèi)就是元素的的邊框 (border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。
每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細講解這三個方面。
邊框與背景
CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現(xiàn)在邊框的可見部分之間。
CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現(xiàn)。
邊框的樣式
樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
CSS 的?border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。
例如，您可以為把一幅圖片的邊框定義為 outset，使之看上去像是“凸起按鈕”：
a:link img {border-style: outset;}
border-style 值:
none: 默認無邊框
dotted: dotted:定義一個點線框
dashed: 定義一個虛線框
solid: 定義實線邊界
double: 定義兩個邊界。 兩個邊界的寬度和border-width的值相同
groove: 定義3D溝槽邊界。效果取決于邊界的顏色值
ridge: 定義3D脊邊界。效果取決于邊界的顏色值
inset:定義一個3D的嵌入邊框。效果取決于邊界的顏色值
outset: 定義一個3D突出邊框。 效果取決于邊界的顏色值
定義多種樣式
您可以為一個邊框定義多個樣式，例如：
p.aside {border-style: solid dotted dashed double;}
上面這條規(guī)則為類名為 aside 的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
我們又看到了這里的值采用了 top-right-bottom-left 的順序，討論用多個值設置不同內(nèi)邊距時也見過這個順序。
定義單邊樣式
如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有 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。
邊框-簡寫屬性
上面的例子用了很多屬性來設置邊框。
T你也可以在一個屬性中設置邊框。
你可以在"border"屬性中設置：
border-width
border-style (required)
border-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border:5px solid orange;
}
</style>
</head>
<body>
<p>段落文字部分</p>
</body>
</html>CSS 邊框?qū)傩?/p>
屬性 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 描述
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 ? ?設置元素的上邊框的寬度。 ? ?
