CSS邊框

目錄

• 1 border
• 2 border-col
• 3 border-style
• 4 border-width
• 5 border-top
• 6 border-top-color
• 7 border-top-style
• 8 border-top-width

border

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

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

border-col

語法：border-color : color
取值：
color  :　 指定顏色。請參閱 顏色單位 和 附錄：顏色表

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

border-style

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

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

border-width

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

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

border-top

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

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

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

border-top-style

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

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

border-top-width

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

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