盒模型四大家族，content，padding，margin，沒一個省心的，終於遇到了最友好的border屬性。border的友好從名字就可以看出來，設計者設計此屬性的初衷就是給元素弄個"邊框"。在空間計算上也沒那麼多的破事兒，是多少，就是多少。和其他三兄弟不同，border連百分比值計算的事兒都省了，這或許跟邊框的粗細與元素大小沒有必然聯絡有關，比如一個長寬200的盒子，和一個長寬400的盒子，他們的border都是1px，不會因為盒子變大了，邊框也要跟著變粗，這也不符合我們的審美。下面開始探究border的屬性以及一些實用的技巧。

1.瞭解各種border-style型別

  常用的border-style有四種類型：none，solid，dashed和dotted。

  border-style的預設值是none，也就是不參與計算，這有點類似於display:none，因此如果你單純設定border-width和border-color是不會有邊框顯示的。如果你想讓你的邊框顯示，請務必設定border-style屬性不為none。

  通常none屬性用於重置某一條邊框樣式，當然我們也可以設定某一條border-width：0，他們的效果是一樣的，根據前輩的測試，這樣寫的渲染效能最高：

<style>
div{
 border:1px solid;
 border-bottom:0 none;
}
</style>
 

   最常用的border-style是solid屬性，這個屬性不過多介紹，就是實線屬性。

  除了實線，還有兩種虛線屬性，分別是dashed（虛線）和dotted（虛點）。在這裡作者只介紹了這兩種屬性在不同瀏覽器下的不同表現，沒有涉及到“虛線間隔”的問題，事實上如果需要自定義的虛線間隔，需要用到border-image或svg，這都不屬於本書討論的範圍，因此這兩種虛線也不過多討論。

  除了實線和虛線，border-style還有幾種不常見的屬性，分別是double(雙線邊框)，inset(內凹)，outset(外凹)，後面兩個幾乎已經不用了，雙線邊框在使用的時候需注意border-width>=3px才能顯示出雙線邊框的效果，你只需要記住border-widht = 雙線 + 雙線間隔就知道為什麼border-width要>3這個樣式才能生效了。

2.border-color的預設值

  如果不設定border-color的話，border-color會取color色值作為自己的預設值，寫個測試驗證一下

<div class="filePost"></div>
<style>
body{
	margin: 0;
}

.filePost {
    display: inline-block;
    width: 76px; height: 76px;
    color: #ccc;
    border: 2px dashed;
    position: relative;
}
.filePost:hover {
    color: #34538b;
}
.filePost::before, .filePost::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.filePost::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
}
.filePost::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
}
</style>

  在滑鼠移入的時候，我只改變了color的顏色就可以讓border的顏色跟著變化，不需要去修改before，after偽類的border-color，非常好用的特性。

3.用border的轉角特性構建基本圖形

  border屬性可以實現相容性非常好的三角圖形效果，究其原因，發現竟然是border-style中不起眼的inset/outset的轉角特性被solid沿用導致的。下面來畫一個四色邊框看看border的“轉角特性”。

<div class="colors"></div>
<style>
.colors{
	width: 100px;
	height: 100px;
	border: 20px solid;
	border-color: red yellow green blue;
}
</style>

  可以很明顯的看到，上下左右四個方向是由“梯形”邊框連線而成的，梯形的特點就是在上底邊為0的時候就可以轉化成三角形，我們把長寬都設為0，就可以利用border轉角的特性生成四個三角形，此時我們再用border-color:transpaorent方式隱藏部分border，就可以實現許多實用的圖形。下面我提供一種利用梯形實現圓角效果的例子，當然現在你可以用border-radius，然鵝css2似乎並不支援這個屬性。

<div class="radius">模擬圓角</div>
<style>
.radius {
    display: inline-block;
    line-height: 36px;
    padding: 0 40px;
    color: #fff;
    background-color: #cd0000;
    position: relative;
}
.radius:before,
.radius:after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    border-style: solid;
}
.radius:before {
    top: -2px;
    border-width: 0 2px 2px;
    border-color: transparent transparent #cd0000;
}
.radius:after {
    bottom: -2px;
    border-width: 2px 2px 0;
    border-color: #cc0000 transparent transparent;
}
</style>

  除了上面的例子之外，還有很常用的用border實現三角形之類的，這裡就不多展開了，只要你想得到，border能做的事情還有很多很多。

  盒模型四大家族到本章告一段落了，下一章是關於內聯元素的內容，自己在開發的時候非常“討厭”使用inline元素，不知道看完下一章能否有所改善，菜是原罪。

  有興趣的可以關注下這個系列。