在網(wǎng)頁中，邊框隨處可見，任何塊元素和行內元素都可以設置邊框屬性。例如，div元素可以設置邊框，img元素也可以設置邊框，table元素也可以設置邊框，span元素同樣也可以設置邊框等等。

目標

• 設置邊框的三要素
• 簡寫邊框法
• 單獨設置邊框

一個元素的邊框，同時設置邊框的寬度border-width、邊框的外觀border-style和邊框的顏色border-color這三個屬性值。

邊框

邊框的寬度--border-width

在css中，使用border-width屬性來定義邊框的寬度。

語法：border-width:像素值;

像素值越大，則線條越大。

不同大小的邊框寬度

邊框的外觀--border-style

在CSS中，使用border-style屬性來定義邊框的外觀

語法：border-style:屬性值;

屬性值有很多種，常用的只有實線和虛線

屬性值

常用的是實線邊框和虛線邊框

各式各樣的邊框外觀

邊框的顏色--border-color

在CSS中，使用border-color屬性來定義邊框的顏色

語法：border-color:顏色值;

說明：顏色值是一個關鍵字或一個16進制的RGB值。

有顏色的邊框

邊框簡寫

在實際中，一般都會使用簡寫，就要按照順序來設置屬性：border-width、border-style、border-color。

單獨設置邊框要素，寫法很繁瑣

沒有使用簡寫

使用簡寫法，方便簡潔

使用了簡寫

單獨邊框設置

可以分別針對上下左右四條邊框設置單獨的樣式

border-top（上邊框）、border-bottom（下邊框）、border-left（左邊框）、border-right（右邊框）

單獨設置

個性的邊框

總結

總結