outline顧英文名思義就是元素的輪廓，其實一般我們很少去設定元素的outline樣式，因此很多人對他不太了解。瀏覽器預設給很多特定元素的某些行為加上了outline樣式，比如a標籤、input輸入框等。當你用鍵盤tab鍵選中這些元素時候都會有乙個外邊框方便鍵盤俠操作。我以前一度以為outline這種樣式只存在於表單元素等特定元素上...其實他對所有元素都適用的，只不過應用場景大多在表單等元素上，而且從樣式的規則設定來看跟border如出一轍，簡直是親兒子。
知道了啥是outline後，就直接從乙個直觀的input框來觀察其具體屬性是怎麼設定的。
focus事件後在chrome瀏覽器下的預設表現就是這樣的：
這個小藍框就是windows下chrome中預設的表現，他預設的樣式設定如下：
input:focus, textarea:focus, select:focus
user agent stylesheet
:focus
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。
主要差異就兩點
如果要實現圓角可以用box-shadow參考張鑫旭大大部落格。
自省兩三言
一 人之所以痛苦，在於追求錯誤的東西。二 與其說是別人讓你痛苦，不如說自己的修養不夠。三 如果你不給自己煩惱，別人也永遠不可能給你煩惱。因為你自己的內心，你放不下。四 好好的管教你自己，不要管別人。五 不寬恕眾生，不原諒眾生，是苦了你自己。六 別說別人可憐，自己更可憐，自己修行又如何？自己又懂得人生...
文案學習兩三事
一 追熱點的三個原則 三觀正 不能盲目追逐熱點話題 速度快 6小時內 關聯度強 話題和產品 表述簡單 利於記憶 二 追熱點步驟 每天檢視搜搜熱點和微博大號，找關聯，做創意 三 互動的套路 先問兩 三個具體問題，找到對方的興趣點 出題和遊戲，icebreaker games 破冰遊戲 拉近陌生人之間的...
技術架構兩三語
一 b 審視架構,多視點 b color darkred 摘錄 color 從靜態的角度，架構要回答乙個系統在技術上如何組織 從變化的角度，架構要回答如何支援系統不斷產生的新功能 新變化以及適時的重構 從服務質量的角度，架構要平衡各種和使用者體驗有關的指標 從運維的角度，架構要回答如何充分利用計算機...