5 邊框屬性

邊框屬性用於設定一個元素的邊框風格、邊框寬度、邊框顏色，可以一起設定4條邊的邊框，也可對上邊框、右邊框、下邊框和左邊框單獨設定。分別介紹如下。

a．邊框風格屬性

可以通過邊框風格屬性border-style設定上、下、左、右邊框的風格，該屬性用於設定一個元素邊框的樣式，而且必須用於指定可見的邊框。可以使用1～4個關鍵字，如果4個值都給出了，則它們分別應用於上、右、下和左邊框的樣式。如果給出一個值，它將被運用到各邊上。如果給出了兩個或三個值，則省略了的值與對邊相等。也可以分別使用border-top-style、border-bottom-style、border-left-style和border-right-style屬性單獨設定各邊的風格，它們可以使用的屬性值、解釋和效果如圖1所示。

圖1 邊框風格的屬性值、解釋和效果圖

例句如下所示：

b．邊框寬度屬性

可以通過邊框寬度屬性border-width設定上、下、左、右邊框的寬度，該屬性用1～4個值來設定元素的邊界，值是一個關鍵字或長度，不允許使用負值長度。如果4個值都給出了，則它們分別應用於上、右、下和左邊框的樣式。如果只給出一個值，它將被運用到各邊上。如果給出了兩個或三個值，則省略了的值與對邊相等。這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。也可以分別使用border-top-width、border-bottom-width、border-left-width和border-right-width屬性單獨設定各邊的寬度。除了可以使用長度單位定值，還可以用medium（預設值）、thin（比medium細）或thick（比medium粗）值。例句如下所示：

c．邊框顏色屬性

可以通過邊框顏色屬性border-color設定上、下、左、右邊框的顏色，可以使用1～4個關鍵字。如果4個值都給出了，則它們分別應用於上、右、下和左邊框的樣式。如果給出一個值，則它將被運用到各邊上。如果給出了兩個或三個值，則省略了的值與對邊相等。例句如下所示：

d．略寫的邊框屬性

CSS屬性border是邊框屬性的一個快捷的綜合寫法，是一個用於設定一個元素邊框的寬度、樣式和顏色的略寫，它包含border-width、border-style和border-color屬性。例句如下：

p {border:5px solid gray;} /* 設定段落元素的4個邊框為直線式邊框、5畫素寬的灰色 */

邊框屬性border只能設定4種邊框，也只能給出一組邊框的寬度和樣式。為了給出一個元素的4種邊框的不同的值，網頁製作者必須使用一個或更多的屬性，如上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框樣式、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。

>