outline小技巧

outline是幹什麼的

定義
outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

以上是但w3c上說明。但個人理解是，它跟border是同樣是元素的邊框，可是它又有別於border：outline 他的大小不會計算到元素上，不會影響佈局，而border是會的。
如：

.box{width:300px; outline:3px solid #eee;}/*這裏的的box的寬度爲300*/
.bod{ width:330px; border:3px solid #eee}/*這裏的box的寬度爲306*/

怎麼用

相信你已經知道怎麼用了，就跟border同樣的用。語法以下

outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit

也能夠像border那樣分開寫

.box{
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

使用場景

看了其它例子通常用在元素的:active 上，用來標明突出元素正在被點擊。但其它能夠用它代替掉border的。
像這種.active狀態，當前狀態的圖片加一個邊框，若是使用border加的話，會改變原來佈局。但使用outline徹底沒問題

.]

支持程度

firefox下的特殊性

這東西好用是好用，代替個border也沒什麼問題，可是我發現這貨在firfox搞特殊，
其它瀏覽器是以設置了outline的元素的高度（寬度）上添加的邊框
在火狐下，是以設置了的outline的元素的全部子元素，包含隱藏的元素的高度（寬度）上添加邊框
不太好理解哈？看例子連接描述
其它瀏覽器都這樣

firefox下卻多了一大截大底部。

outline是把元素的全部子孫元素最大的那個爲基準來定的高寬，像上面這個例子ul.w-select-ul已經設置了absolute，但outline仍是爲它預留高度
而其它瀏覽器則是以元素實際的高度設置

這種狀況避免使用outline，或者爲元素加上overflow: hidden;