css邊框屬性詳細總結

  元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線.

邊框的樣式 (border-style)

樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。

a,css 邊框樣式分為10種不同的非inherit樣式：如下：

統一風格

1，none 無邊框

2，solid 直線邊框

3，dashed 虛線邊框

4，dotted 點狀邊框

5，double 雙虛線邊框

6，groove 凸槽邊框

7，ridge 壟狀邊框

8，inset  inset邊框

9，outset outset邊框

10，inherit繼承

b,定義單邊樣式 分為以下4種樣式

單獨風格

1，border-bottom-style 下邊邊框樣式

2，border-top-style   上邊邊框樣式

3，border-left-style   左邊邊框樣式

4，border-right-style   右邊邊框樣式

因此這兩種方法是等價的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

邊框寬度（border-width）

統一風格

border-width屬性值：

1，thin 細邊框

2，medium中等邊框

3，thick粗邊框

4，px固定值邊框

5，inherit 繼承

p {

border-style: solid; 

border-width: thick;

}

等同于

p {

border-style: solid;

 border-width: 5px;

}

單邊寬度

p {

border-style: solid;

border-width: 15px 5px 15px 5px;

}

也等同于

p {

  border-style: solid;

  border-top-width: 15px;

  border-right-width: 5px;

  border-bottom-width: 15px;

  border-left-width: 5px;

  }

邊框顏色（border-color）

統一風格

p {

  border-style: solid;

  border-color: blue red;

  }

單獨風格

1，border-top-color    上邊框顏色

2，border-bottom-color  下邊框顏色

3，border-left-color   左邊框顏色

4，border-right-color  有邊框顏色

h2 {

  border-style: solid;

  border-color: black;

  border-right-color: red;

  }