本篇文章為大家展示了CSS中如何使用border邊框?qū)傩?，?nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)公司10多年成都定制網(wǎng)頁設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),成都定制網(wǎng)頁設(shè)計及推廣,對成都塔吊租賃等多個方面擁有多年的網(wǎng)站設(shè)計經(jīng)驗的網(wǎng)站建設(shè)公司。
CSS border屬性邊框
元素的邊框(border)是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，跟表格table的border類似。
CSS border屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
CSS邊框
在HTML中，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用CSS邊框?qū)傩裕覀兛梢詣?chuàng)建出效果出色的邊框，并且可以應(yīng)用于任何元素。
元素外邊距內(nèi)就是元素的的邊框(border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。
每個邊框有3個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細(xì)講解這三個方面。
邊框與背景
CSS規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因為有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間。
CSS2指出背景只延伸到內(nèi)邊距，而不是邊框。后來CSS2.1進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循CSS2.1定義，不過一些較老的瀏覽器可能會有不同的表現(xiàn)。
邊框的樣式
樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當(dāng)然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
CSS的border-style屬性定義了10個不同的非inherit樣式，包括none。
例如，您可以為把一幅圖片的邊框定義為outset，使之看上去像是“凸起按鈕”：
重慶分公司
重慶分公司
a:linkimg{border-style:outset;}定義多種樣式
您可以為一個邊框定義多個樣式，例如：
p.aside{border-style:soliddotteddasheddouble;}上面這條規(guī)則為類名為aside的段落定義了四種邊框樣式：實線上邊框、點線右邊框、虛線下邊框和一個雙線左邊框。
我們又看到了這里的值采用了top-right-bottom-left的順序，討論用多個值設(shè)置不同內(nèi)邊距時也見過這個順序。
定義單邊樣式
如果您希望為元素框的某一個邊設(shè)置邊框樣式，而不是設(shè)置所有4個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
border-top-style border-right-style border-bottom-style border-left-style
因此這兩種方法是等價的：
p{border-style:solidsolidsolidnone;} p{border-style:solid;border-left-style:none;}注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在border-style之前，簡寫屬性的值就會覆蓋單邊值none。
邊框的寬度
您可以通過border-width屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如2px或0.1em；或者使用3個關(guān)鍵字之一，它們分別是thin、medium（默認(rèn)值）和thick。
注釋：CSS沒有定義3個關(guān)鍵字的具體寬度，所以一個用戶代理可能把thin、medium和thick分別設(shè)置為等于5px、3px和2px，而另一個用戶代理則分別設(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:15px5px15px5px;}上面的例子也可以簡寫為（這樣寫法稱為值復(fù)制）：
p{border-style:solid;border-width:15px5px;}您也可以通過下列屬性分別設(shè)置邊框各邊的寬度：
border-top-width border-right-width border-bottom-width border-left-width
因此，下面的規(guī)則與上面的例子是等價的：
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會出現(xiàn)什么情況：
p{border-style:none;border-width:50px;}盡管邊框的寬度是50px，但是邊框樣式設(shè)置為none。在這種情況下，不僅邊框的樣式?jīng)]有了，其寬度也會變成0。邊框消失了，為什么呢？
這是因為如果邊框樣式為none，即邊框根本不存在，那么邊框就不可能有寬度，因此邊框?qū)挾茸詣釉O(shè)置為0，而不論您原先定義的是什么？
記住這一點非常重要。事實上，忘記聲明邊框樣式是一個常犯的錯誤。根據(jù)以下規(guī)則，所有h2元素都不會有任何邊框，更不用說20像素寬了：
h2{border-width:20px;}由于border-style的默認(rèn)值是none，如果沒有聲明樣式，就相當(dāng)于border-style:none。因此，如果您希望邊框出現(xiàn)，就必須聲明一個邊框樣式。
邊框的顏色
設(shè)置邊框顏色非常簡單。CSS使用一個簡單的border-color屬性，它一次可以接受最多4個顏色值。
可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進(jìn)制和RGB值：
p{ border-style:solid; border-color:bluergb(25%,35%,45%)#909090red; }如果顏色值小于4個，值復(fù)制就會起作用。例如下面的規(guī)則聲明了段落的上下邊框是藍(lán)色，左右邊框是紅色：
p{ border-style:solid; border-color:bluered; }注釋：默認(rèn)的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設(shè)它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為color可以繼承）。這個父元素很可能是body、div或另一個table。
定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
border-top-color border-right-color border-bottom-color border-left-color
要為h2元素指定實線黑色邊框，而右邊框為實線紅色，可以這樣指定：
h2{ border-style:solid; border-color:black; border-right-color:red; }透明邊框
我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個不可見的邊框。
CSS2引入了邊框顏色值transparent。這個值用于創(chuàng)建有寬度的不可見邊框。請看下面的例子：
