outline和他孃親border兩三事

outline是啥？

outline顧英文名思義就是元素的輪廓，其實通常咱們不多去設置元素的outline樣式，所以不少人對他不太瞭解。瀏覽器默認給不少特定元素的某些行爲加上了outline樣式，好比a標籤、input輸入框等。當你用鍵盤tab鍵選中這些元素時候都會有一個外邊框方便鍵盤俠操做。我之前一度覺得outline這種樣式只存在於表單元素等特定元素上...其實他對全部元素都適用的，只不過應用場景大多在表單等元素上，並且從樣式的規則設置來看跟border一模一樣，簡直是親兒子。

outline樣式表現

知道了啥是outline後，就直接從一個直觀的input框來觀察其具體屬性是怎麼設置的。

<input type="text">

這樣什麼都不設置的輸入框觸發focus事件後在chrome瀏覽器下的默認表現就是這樣的：

這個小藍框就是windows下chrome中默認的表現，他默認的樣式設置以下：

input:focus, textarea:focus, select:focus {
    outline-offset: -2px;
}
user agent stylesheet
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

首先咱們來看outline-offset，他表明outline的偏移量，就是相對於border的偏移位置，要不說他是border的親兒子呢，你偏移到天上也是以你麻麻爲基準的233。默認是-2px因此咱們就看到效果是遮住了border，那是否是把偏移設置爲0就能看到輪廓像外擴了？嘗試下，別說0了設置爲10px後仍然看不到任何效果仍是原來的樣子，爲何呢？
那就要來看outline: -webkit-focus-ring-color auto 5px;，說他是border親兒子，就體如今這裏，跟border縮寫同樣，outline是outline-width outline-style outline-color的縮寫。
這個默認樣式細心的朋友立刻就會注意到5px的輪廓根本沒有展現出來嘛，對的，問題就在他前面的auto屬性值，也就是outline-style的屬性值，默認是auto時候意味着輪廓的基本樣式都取決於瀏覽器了...其實也不用深究，根據個人測試若是outline-style樣式保持auto的話也就只能改改outline-color了，這個瀏覽器的決定的仍是不少的，所以若是要自定義樣式，必須首先把這個outline-style改成其餘，經常使用的也就是solid。

outline-style: solid;
    outline-offset: 2px;

修改了上面兩個屬性後，樣式變爲下面這個樣子：

能夠看到5px的輪廓了！而且距離黑色的邊框有2px的距離。那不少人會問既然這樣那要outline有什麼用呢？border不能知足需求麼，這個問題如今不能說outline真得不可或缺，由於box-shadow已經能夠達到一樣的效果，感興趣的朋友能夠去了解下。可是隻有border確實是不行的，下面咱們引出了他們的異同，也就揭示了爲何要有outline。

outline和border的不一樣

主要差別就兩點

• outline不佔據空間，這個很是重要，由於border但是盒模型的最外層的堅決守護者，沒事亂動是會影響頁面佈局的，能不動佈局固然不動了，這個時候用outline來突出顯示樣式是最合適的。
• outline沒有圓角，畢竟仍是個孩子，沒有從麻麻那裏學會border-radius，不過我以爲之後真得會加上的，會慢慢長大的。（fire-fox已經實現，我沒測試...這電腦沒裝）

若是要實現圓角能夠用box-shadow參考張鑫旭大大博客。

參考

• 二者差別
• outline-style