3、CSS 边框border
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色。
CSS 邊框?qū)傩?/strong>
| border | 簡寫屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。 |
| border-style | 用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。 |
| border-width | 簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。 |
| border-color | 簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。 |
| border-bottom | 簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-bottom-color | 設(shè)置元素的下邊框的顏色。 |
| border-bottom-style | 設(shè)置元素的下邊框的樣式。 |
| border-bottom-width | 設(shè)置元素的下邊框的寬度。 |
| border-left | 簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-left-color | 設(shè)置元素的左邊框的顏色。 |
| border-left-style | 設(shè)置元素的左邊框的樣式。 |
| border-left-width | 設(shè)置元素的左邊框的寬度。 |
| border-right | 簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-right-color | 設(shè)置元素的右邊框的顏色。 |
| border-right-style | 設(shè)置元素的右邊框的樣式。 |
| border-right-width | 設(shè)置元素的右邊框的寬度。 |
| border-top | 簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-top-color | 設(shè)置元素的上邊框的顏色。 |
| border-top-style | 設(shè)置元素的上邊框的樣式。 |
| border-top-width | 設(shè)置元素的上邊框的寬度。 |
1、邊框樣式 border-style
邊框樣式屬性指定要顯示什么樣的邊界。
border-style屬性用來定義邊框的樣式
border-style 值:
定義多種樣式
您可以為一個(gè)邊框定義多個(gè)樣式，例如：
上面這條規(guī)則為類名為 aside 的段落定義了四種邊框樣式：實(shí)線上邊框、點(diǎn)線右邊框、虛線下邊框和一個(gè)雙線左邊框。
我們又看到了這里的值采用了 top-right-bottom-left 的順序，討論用多個(gè)值設(shè)置不同內(nèi)邊距時(shí)也見過這個(gè)順序。
定義單邊樣式
如果您希望為元素框的某一個(gè)邊設(shè)置邊框樣式，而不是設(shè)置所有 4 個(gè)邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
因此這兩種方法是等價(jià)的：
p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因?yàn)槿绻褑芜厡傩苑旁?border-style之前，簡寫屬性的值就會(huì)覆蓋單邊值 none。
2、邊框的寬度border-width
您可以通過 border-width 屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：
注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于
5px、3px 和 2px，而另一個(gè)用戶代理則分別設(shè)置為 3px、2px 和 1px。
所以，我們可以這樣設(shè)置邊框的寬度：
p {border-style: solid; border-width: 5px;}或者：
p {border-style: solid; border-width: thick;}定義單邊寬度
您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}上面的例子也可以簡寫為（這樣寫法稱為值復(fù)制）：
p {border-style: solid; border-width: 15px 5px;}您也可以通過下列屬性分別設(shè)置邊框各邊的寬度：
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
因此，下面的規(guī)則與上面的例子是等價(jià)的：
p {border-style: solid;border-top-width: 15px;border-right-width: 5px;border-bottom-width: 15px;border-left-width: 5px;}沒有邊框
在前面的例子中，您已經(jīng)看到，如果希望顯示某種邊框，就必須設(shè)置邊框樣式，比如 solid 或 outset。
那么如果把 border-style 設(shè)置為 none 會(huì)出現(xiàn)什么情況：
p {border-style: none; border-width: 50px;}盡管邊框的寬度是 50px，但是邊框樣式設(shè)置為 none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會(huì)變成 0。邊框消失了，為什么呢？
這是因?yàn)?strong>如果邊框樣式為 none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣?dòng)設(shè)置為 0，而不論您原先定義的是什么。
記住這一點(diǎn)非常重要。事實(shí)上，忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。根據(jù)以下規(guī)則，所有 h1 元素都不會(huì)有任何邊框，更不用說 20 像素寬了：
h1 {border-width: 20px;}
由于 border-style 的默認(rèn)值是 none，如果沒有聲明樣式，就相當(dāng)于 border-style: none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。
3、邊框的顏色border-color
設(shè)置邊框顏色非常簡單。CSS 使用一個(gè)簡單的 border-color 屬性，它一次可以接受最多 4 個(gè)顏色值。
可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和 RGB 值：
p {border-style: solid;border-color: blue rgb(25%,35%,45%) #909090 red;}如果顏色值小于 4 個(gè)，值復(fù)制就會(huì)起作用。例如下面的規(guī)則聲明了段落的上下邊框是藍(lán)色，左右邊框是紅色：
p {border-style: solid;border-color: blue red;}注釋：默認(rèn)的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設(shè)它是一個(gè)表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因?yàn)閏olor 可以繼承）。這個(gè)父元素很可能是 body、div 或另一個(gè) table。
定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
要為 h1 元素指定實(shí)線黑色邊框，而右邊框?yàn)閷?shí)線紅色，可以這樣指定：
h1 {border-style: solid;border-color: black;border-right-color: red;}透明邊框transparent
我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個(gè)不可見的邊框。
CSS2 引入了邊框顏色值 transparent。這個(gè)值用于創(chuàng)建有寬度的不可見邊框。請(qǐng)看下面的例子：
<html> <head><style type="text/css"> a:link, a:visited {border-style: solid;border-width: 5px;border-color: transparent;} a:hover {border-color: gray;} </style></head><body><a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a></body> </html>
從某種意義上說，利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個(gè)好處，就是能在你需要的時(shí)候使其可見。這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)域（如果有可見背景的話）。
總結(jié)
以上是生活随笔為你收集整理的3、CSS 边框border的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2、CSS 内边距
- 下一篇： 4、CSS 外边距margin