你對(duì)CSS邊框的使用是否熟悉，元素的邊框(border)是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，并且每個(gè)邊框有3個(gè)方面：寬度、樣式，以及顏色。在下面的篇幅，我們會(huì)為您詳細(xì)講解這三個(gè)方面。

CSS邊框

在HTML中，我們使用表格來(lái)創(chuàng)建文本周?chē)倪吙颍峭ㄟ^(guò)使用CSS邊框屬性，我們可以創(chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素。

元素外邊距內(nèi)就是元素的的邊框(border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。

每個(gè)邊框有3個(gè)方面：寬度、樣式，以及顏色。在下面的篇幅，我們會(huì)為您詳細(xì)講解這三個(gè)方面。

CSS邊框與背景

CSS規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴?ldquo;間斷的”（例如，點(diǎn)線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見(jiàn)部分之間。

CSS2指出背景只延伸到內(nèi)邊距，而不是邊框。后來(lái)CSS2.1進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循CSS2.1定義，不過(guò)一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。

CSS邊框的樣式

樣式是邊框最重要的一個(gè)方面，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤](méi)有樣式，將根本沒(méi)有邊框。

CSS的border-style屬性定義了10個(gè)不同的非inherit樣式，包括none。

例如，您可以為把一幅圖片的邊框定義為outset，使之看上去像是“凸起按鈕”：

a:linkimg{border-style:outset;}  
 

定義多種樣式

您可以為一個(gè)邊框定義多個(gè)樣式，例如：

p.aside{border-style:soliddotteddasheddouble;}  
 

上面這條規(guī)則為類(lèi)名為aside的段落定義了四種CSS邊框樣式：實(shí)線上邊框、點(diǎn)線右邊框、虛線下邊框和一個(gè)雙線左邊框。

我們又看到了這里的值采用了top-right-bottom-left的順序，討論用多個(gè)值設(shè)置不同內(nèi)邊距時(shí)也見(jiàn)過(guò)這個(gè)順序。

定義單邊樣式

如果您希望為元素框的某一個(gè)邊設(shè)置邊框樣式，而不是設(shè)置所有4個(gè)邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

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

因此這兩種方法是等價(jià)的：

p{border-style:solidsolidsolidnone;}  
p{border-style:solid;border-left-style:none;}  
 

注意：如果要使用第二種方法，必須把單邊屬性放在簡(jiǎn)寫(xiě)屬性之后。因?yàn)槿绻褑芜厡傩苑旁赽order-style之前，簡(jiǎn)寫(xiě)屬性的值就會(huì)覆蓋單邊值none。#p#

CSS邊框的寬度

您可以通過(guò)border-width屬性為邊框指定寬度。

為CSS邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如2px或0.1em；或者使用3個(gè)關(guān)鍵字之一，它們分別是thin、medium（默認(rèn)值）和thick。

注釋?zhuān)篊SS沒(méi)有定義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è)置元素的各邊CSS邊框：

p{border-style:solid;border-width:15px5px15px5px;}上面的例子也可以簡(jiǎn)寫(xiě)為（這樣寫(xiě)法稱(chēng)為值復(fù)制）：

p{border-style:solid;border-width:15px5px;}您也可以通過(guò)下列屬性分別設(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;  
}  
 

沒(méi)有邊框

在前面的例子中，您已經(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)槿绻吙驑邮綖閚one，即邊框根本不存在，那么邊框就不可能有寬度，因此CSS邊框?qū)挾茸詣?dòng)設(shè)置為0，而不論您原先定義的是什么？

記住這一點(diǎn)非常重要。事實(shí)上，忘記聲明邊框樣式是一個(gè)常犯的錯(cuò)誤。根據(jù)以下規(guī)則，所有h1元素都不會(huì)有任何邊框，更不用說(shuō)20像素寬了：

h1{border-width:20px;}由于border-style的默認(rèn)值是none，如果沒(méi)有聲明樣式，就相當(dāng)于border-style:none。因此，如果您希望CSS邊框出現(xiàn)，就必須聲明一個(gè)邊框樣式。#p#

CSS邊框的顏色

設(shè)置邊框顏色非常簡(jiǎn)單。CSS使用一個(gè)簡(jiǎn)單的border-color屬性，它一次可以接受最多4個(gè)顏色值。

可以使用任何類(lèi)型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和RGB值：

p{  
border-style:solid;  
border-color:bluergb(25%,35%,45%)#909090red;  
}  
 

如果顏色值小于4個(gè)，值復(fù)制就會(huì)起作用。例如下面的規(guī)則聲明了段落的上下邊框是藍(lán)色，左右邊框是紅色：

p{  
border-style:solid;  
border-color:bluered;  
}  
 

注釋?zhuān)耗J(rèn)的邊框顏色是元素本身的前景色。如果沒(méi)有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒(méi)有任何文本，假設(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;  
}  
 

透明邊框

我們剛才講過(guò)，如果邊框沒(méi)有樣式，就沒(méi)有寬度。不過(guò)有些情況下您可能希望創(chuàng)建一個(gè)不可見(jiàn)的邊框。

CSS2引入了邊框顏色值transparent。這個(gè)值用于創(chuàng)建有寬度的不可見(jiàn)邊框。請(qǐng)看下面的例子：

<ahrefahref="#">AAA</a> 
<ahrefahref="#">BBB</a> 
<ahrefahref="#">CCC</a> 
 

我們?yōu)樯厦娴逆溄佣x了如下樣式：

a:link,a:visited{  
border-style:solid;  
border-width:5px;  
border-color:transparent;  
}  
a:hover{border-color:gray;}  
 

如需查看以上樣式的效果，請(qǐng)點(diǎn)擊：TIY。

從某種意義上說(shuō)，利用transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個(gè)好處，就是能在你需要的時(shí)候使其可見(jiàn)。這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)域（如果有可見(jiàn)背景的話）。

重要事項(xiàng)：在IE7之前，IE/WIN沒(méi)有提供對(duì)transparent的支持。在以前的版本，IE會(huì)根據(jù)元素的color值來(lái)設(shè)置邊框顏色
 

【編輯推薦】

1. CSS三大選擇器區(qū)別
2. CSS組合與嵌套用法詳解
3. CSS樣式表設(shè)計(jì)十個(gè)雕蟲(chóng)小技
4. 深入學(xué)習(xí)六大CSS選擇符的使用
5. 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因