CSS進階（6）—— 淺嘗盒模型中最友好的border

盒模型四你們族，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: 200px; height: 200px; border: 30px solid; border-color: red yellow green blue; } </style>
複製代碼

因爲markdown編輯器支持標籤語言，所以咱們能夠直接預覽最終效果以下（小提示：你能夠經過瀏覽器直接檢查下面的元素看到CSS樣式）

能夠很明顯的看到，上下左右四個方向是由「梯形」邊框鏈接而成的，梯形的特色就是在上底邊爲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元素，不知道看完下一章可否有所改善，菜是原罪。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。