編輯“CSS邊框”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[CSS學(xué)習(xí)教程#CSS學(xué)習(xí)教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>

==border==
語法：border : border-width || border-style || border-color  <br>
取值：<br>
該屬性是復(fù)合屬性。請參閱各參數(shù)對應(yīng)的屬性。<br>
默認(rèn)值為： medium none 。 border-color 的默認(rèn)值將采用文本顏色。<br> 

說明：<br>
設(shè)置對象的[[邊框樣式]]。<br>
當(dāng)你指定了邊框顏色( border-color )和邊框?qū)挾? border-width )時，你必須同時指定邊框樣式( border-style )，否則邊框不會被呈現(xiàn)。<br>
如使用該復(fù)合屬性定義其單個參數(shù)，則其他參數(shù)的默認(rèn)值將無條件覆蓋各自對應(yīng)的單個屬性設(shè)置。<br>
例如：設(shè)置 border : thin 等于設(shè)置 border : thin none ，而 border-color 的默認(rèn)值將采用文本顏色。因此此前的任何 border-color 和 border-width 設(shè)置都會被清除。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
對應(yīng)的腳本特性為 border 。 <br>
示例：
<br>p { border: thick double yellow; }<br> 
blockquote { border: dotted gray; } <br>
p { border: 25px; } 
==border-col==
語法：border-color : color  <br>
取值：<br>
color  :　 指定顏色。請參閱 顏色單位 和 附錄：顏色表  <br>

說明：<br>
設(shè)置對象邊框的顏色。<br>
如果提供全部四個參數(shù)值，將按上－右－下－左的順序作用于四個邊框。如果只提供一個，將用于全部的四條邊。如果提供兩個，第一個用于上－下，第二個用于左－右。如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
如果 border-style 設(shè)置為 none ，本屬性將失去作用。<br>
對應(yīng)的腳本特性為 borderColor 。 <br>
示例：
<br>ody { border-color: silver ;red; } <br>
body { border-color: silver red RGB(223, 94, 77); } <br>
body { border-color: silver red RGB(223, 94, 77) black; } 

==border-style==
語法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset  <br>
取值：<br>
none  :　 默認(rèn)值。無邊框。不受任何指定的 border-width 值影響 <br>
hidden  :　 隱藏邊框。IE不支持 <br>
dotted  :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線 <br>
dashed  :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線 <br>
solid  :　 實線邊框 <br>
double  :　 雙線邊框。兩條單線與其間隔的和等于指定的 border-width 值 <br>
groove  :　 根據(jù) border-color 的值畫3D凹槽 <br>
ridge  :　 根據(jù) border-color 的值畫3D凸槽 <br>
inset  :　 根據(jù) border-color 的值畫3D凹邊 <br>
outset  :　 根據(jù) border-color 的值畫3D凸邊 <br>

說明：<br>
設(shè)置對象邊框的樣式。<br>
如果提供全部四個參數(shù)值，將按上－右－下－左的順序作用于四個邊框。如果只提供一個，將用于全部的四條邊。如果提供兩個，第一個用于上－下，第二個用于左－右。如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
對應(yīng)的腳本特性為 borderStyle 。 <br>
示例：
<br>body { border-style: double groove; } <br>
body { border-style: double groove dashed; } 
==border-width==
語法：border-width : medium | thin | thick | length  <br>
取值：<br>
medium  :　 默認(rèn)值。默認(rèn)寬度 <br>
thin  :　 小于默認(rèn)寬度 <br>
thick  :　 大于默認(rèn)寬度 <br>
length  :　 由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值。<br>

說明：<br>
設(shè)置對象邊框的寬度。<br>
如果提供全部四個參數(shù)值，將按上－右－下－左的順序作用于四個邊框。如果只提供一個，將用于全部的四條邊。如果提供兩個，第一個用于上－下，第二個用于左－右。如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
如果 border-style 設(shè)置為 none ，本屬性將失去作用。<br>
對應(yīng)的腳本特性為 borderWidth 。 <br>
示例：<br>
div { border-style: solid; border-width: thin; } <br>
span { display: block; border-style: solid; border-width: 1px thin; }<br>
p { border-color: #000000; border-width: 1px 1px 2px 3px; }

==border-top==
語法：border-top : border-width || border-style || border-color  <br>
取值：<br>
該屬性是復(fù)合屬性。請參閱各參數(shù)對應(yīng)的屬性。<br>
默認(rèn)值為： medium none 。 border-color 的默認(rèn)值將采用文本顏色。 <br>

說明：<br>
設(shè)置對象上邊框的樣式。<br>
當(dāng)你指定了邊框顏色( border-top-color )和邊框?qū)挾? border-top-width )時，你必須同時指定邊框樣式( border-top-style )，否則邊框不會被呈現(xiàn)。<br>
如使用該復(fù)合屬性定義其單個參數(shù)，則其他參數(shù)的默認(rèn)值將無條件覆蓋各自對應(yīng)的單個屬性設(shè)置。<br>
例如：設(shè)置 border-top : thin 等于設(shè)置 border-top : thin none ，而 border-top-color 的默認(rèn)值將采用文本顏色。因此此前的任何 border-top-color 和 border-top-width 設(shè)置都會被清除。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
對應(yīng)的腳本特性為 borderTop 。 <br>
示例：
<br>div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green; } 

==border-top-color==
語法：border-top-color : color <br>
取值：
<br>color  :　 <br>  

說明：<br>
設(shè)置對象上邊框的顏色。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
如果 border-top-style 設(shè)置為 none 或 border-top-width 設(shè)置為 0 ，本屬性將失去作用。<br>
對應(yīng)的腳本特性為 borderTopColor 。 <br>
示例：<br>
div { border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;} <br>

==border-top-style==
語法： <br>
border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset <br>
取值：<br>
none  :　 默認(rèn)值。無邊框。不受任何指定的 border-width 值影響 
<br>hidden  :　 隱藏邊框。IE不支持 <br>
dotted  :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線 <br>
dashed  :　 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線 <br>
solid  :　 實線邊框 <br>
double  :　 雙線邊框。兩條單線與其間隔的和等于指定的 border-width 值 <br>
groove  :　 根據(jù) border-color 的值畫3D凹槽 <br>
ridge  :　 根據(jù) border-color 的值畫菱形邊框 <br>
inset  :　 根據(jù) border-color 的值畫3D凹邊 <br>
outset  :　 根據(jù) border-color 的值畫3D凸邊 <br>

說明：<br>
設(shè)置對象上邊框的樣式。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
如果 border-top-width 設(shè)置為 0 ，本屬性將失去作用。<br>
對應(yīng)的腳本特性為 borderTopStyle 。 <br>
示例：
<br>body { border-top-style: double; border-bottom-style: groove; border-left-style: dashed; border-right-style: dotted; } <br>
==border-top-width==

語法： <br>
border-top-width : medium | thin | thick | length <br>
取值：<br>
medium  :　 默認(rèn)值。默認(rèn)寬度 <br>
thin  :　 小于默認(rèn)寬度 <br>
thick  :　 大于默認(rèn)寬度 <br>
length  :　 由浮點數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值。<br>

說明：<br>
設(shè)置對象上邊框的寬度。<br>
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。<br>
在 IE5.5+ 中，邊框?qū)傩钥梢灾苯討?yīng)用于內(nèi)聯(lián)要素。而在此前的版本中，內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。<br>
對應(yīng)的腳本特性為 borderTopWidth 。 <br>
示例：<br>
span { border-top-width: thin; border-top-style: solid; } <br>
span { border-bottom-width: thin; border-bottom-style: solid; } <br>
span { border-left-width: thin; border-left-style: solid; } <br>
span { border-right-width: thin; border-right-style: solid; } <br>
除了這里介紹的border-top屬性，CSS里還border-left/right等相關(guān)的樣式屬性，語法與上述介紹的相同，這里不在贅述。

[[category:CSS學(xué)習(xí)教程]]