css邊框?qū)傩栽敿?xì)總結(jié)

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

邊框的樣式 (border-style)

樣式是邊框最重要的一個(gè)方面，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤]有樣式，將根本沒有邊框。

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

統(tǒng)一風(fēng)格

1，none 無邊框

2，solid 直線邊框

3，dashed 虛線邊框

4，dotted 點(diǎn)狀邊框

5，double 雙虛線邊框

6，groove 凸槽邊框

7，ridge 壟狀邊框

8，inset  inset邊框

9，outset outset邊框

10，inherit繼承

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

單獨(dú)風(fēng)格

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

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

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

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

因此這兩種方法是等價(jià)的：

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

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

注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后。因?yàn)槿绻褑芜厡傩苑旁?border-style 之前，簡寫屬性的值就會(huì)覆蓋單邊值 none。

邊框?qū)挾龋╞order-width）

統(tǒng)一風(fēng)格

border-width屬性值：

1，thin 細(xì)邊框

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）

統(tǒng)一風(fēng)格

p {

  border-style: solid;

  border-color: blue red;

  }

單獨(dú)風(fēng)格

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;

  }