DIV CSS 佈局教程網

一、邊框屬性

要設置一個元素的邊框必須要設置以下3個方面：

• （1）邊框的寬度；
• （2）邊框的外觀（實線，或者虛線）；
• （3）邊框的顏色；

表1 邊框的三個屬性 屬性 說明 border-width 邊框的寬度 border-style 邊框的外觀 border-color 邊框的顏色

1、border-width

語法：

border-width:像素值;

說明：

在CSS初學者階段，我們都是建議采用像素做單位

2、border-style

border-style屬性用於設置邊框的外觀，例如實線邊框和虛線邊框。

語法：

border-style:屬性值;

說明：

雖然border-style屬性值很多，但是大部分我們都用不上。一般情況下，我們用到solid和dashed這兩個屬性值就夠了，別浪費時間去記憶其他屬性值，不聽老人言，吃虧在眼前呀！

3、border-color

border-color屬性用來定義邊框的顏色。

語法：

border-color:顏色值

說明：

對於顏色的取值，請使用前端神器“在線調色板”來選取。

二、邊框屬性簡潔寫法

設置一個元素的邊框就要設置3個屬性：border-width、border-style和border-color。如下：

 
border-width:1px;
border-style:solid;
border-color:Red;

這種寫法費時費力，導致代碼量多。因此我們邊框CSS樣式有一個簡潔的寫法：

border:1px solid gray;

三、CSS邊框局部樣式

在CSS中，我們可以分別針對上下左右四條邊框設置單獨的樣式。

1、上邊框border-top

 
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:red;

簡潔寫法：border-top:1px solid red;

2、下邊框border-bottom

 
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:orange;

簡潔寫法：border-bottom:1px solid orange;

3、左邊框-left

 
    border-left-width:1px;
    border-left-style:solid;
    border-left-color:blue;

簡潔寫法：border-left:1px solid blue;

4、右邊框border-right

 
    border-right-width:1px;
    border-right-style:solid;
    border-right-color:red;

簡潔寫法：border-right:1px solid red;