首先，outline是個很牛批的東西，但是我們通常為了瀏覽器之間的相容問題，會把這個outline處理掉，保證頁面在各瀏覽器之間顯示的相同。

有沒有什麼方法利用CSS以及使用一層標籤，【不能使用::before, ::after偽元素實現】【box-shadow效果不好，我試過了，小尺寸IE會糊邊】，相容IE9+瀏覽器 實現下面這個加號效果。

高手在民間，結果@大地Dudy巧妙使用outline實現了Chrome瀏覽器下的十字效果。demo參見這裡

outline知識點很多的，擴充套件開來可以寫個長篇了，這裡簡單介紹點。

1. border近親
outline和border是近親，為什麼這麼講呢？首先，都是給元素外面套框框的；其次，支援的屬性值幾乎都是一樣的，例如，outline-style和border-style值dotted, dashed, solid, …之類的，一些語法也幾乎一樣。如果這都不算近親，你讓絕對定位和浮動何言以對。

2. IE8+支援
outline嚴格來講屬於CSS3屬性，但是IE8+瀏覽器就支援了。外掛一句，IE9+瀏覽器的outline還支援invert，專門針對outline-color. 所以，如果你的專案不用管IE6/IE7瀏覽器，可以把outline掛在心中，有時候說不定會幫忙。

3. 不佔據空間
預設的盒模型下，假設元素100*100畫素，我們給元素設定border:10px solid，則實際該元素佔據的尺寸至少就是120*120畫素，元素的偏移、佈局啊什麼的，就需要多多思量。但是，outline不一樣，你哪怕outline:100px solid，元素佔據的尺寸還是100*100畫素。這種行為表現，與transform以及box-shadow等CSS3屬性很類似，雖然外形豐滿了，但是，佔據的真實空間沒有影響。於是，我們在實現一些互動效果的時候，例如hover變化，我們就可以專注於效果本身，而不用被佈局所左右，是很棒的體驗。

4. 直角！圓角？
正好承上啟下一下。

outline的直角與圓角

一排60*60畫素的直角圖片，選中的圖片外框2畫素帶圓角高亮。瀏覽器相容要求，IE9+以及其他現代瀏覽器。

一般而言，我們的第一反應是使用border + border-radius。但是，有個問題，就是，這裡的外部高亮邊框效果是外擴的，要知道，border是會增加元素的尺寸的，於是，為了我們的完美對齊效果，還需要對選中元素做重定位，上下左右的margin值都需要改變。我丟，想想就煩！

像這種UI表現，天生就是outline乾的事情。於是，我們大手一揮：

outline: 2px solid #26C2A7
 
;

但是，不是圓角啊！

親愛的朋友，千萬不要妄圖通過border-radius來改變outline的圓角，要知道，outline跟border是近親，穿一個開襠褲長大的。但是，媳婦可不能共享哈！border-radius和border是登記在案的光明夫妻，看，連姓氏都隨了夫君了，人家只認border, 你outline沒戲，找自己的媳婦止渴去。

但是，outline貌似是個單身狗，沒有媳婦啊，難道outline註定一輩子直角，掰不彎了？

outline的圓角效果

茫茫CSS海，乍一看去，貌似沒有能讓outline圓角的東西。注意措辭，“貌似”，我們如果有雙犀利的眼睛，還是會發現某處藏可以讓outline圓角的東西。

在FireFox瀏覽器中，就有和outline匹對的圓角夫妻outline-radius,

其關係，就和border和border-radius的關係一樣。

由於目前還只是FireFox瀏覽器私有的屬性，因此，目前的使用需要加-moz-字首，也就是-moz-outline-radius.

相關CSS程式碼如下：

img {
    outline: 30px solid #cd0000;    
    -moz-outline-radius: 30px;
}

是不是很so so啊！如果你觀察足夠仔細，會發現，outline-radius和border-radius還是有區別的？看出來沒，區別在哪裡？答對有獎……哈，沒錯，你們都答錯了！沒有任何區別，outline-radius的圓角規則、語法之類跟border-radius就是一樣的。

唯一的區別，也就是相容性問題，不是看出來的，是試出來的。告訴大家一個不幸的訊息，目前，除了FireFox瀏覽器支援outline-radius，其他瀏覽器都是空大屁！

如果是僅webkit/blink瀏覽器支援還好說，至少移動端還可以用用，搞了個僅僅FireFox支援，玩毛線啊！不對，連毛線都沒得玩！

親，不要絕望啊，車到山前必有路，此路進去……

box-shadow模擬outline的圓角效果

outline-radius雖然沒戲了，但是，我們可以使用其他屬性，可以實現類似的效果，比方說，圖形構建大神之一的box-shadow.

我們平時使用box-shadow最多的是前面3個引數，水平/垂直偏移以及模糊大小，可能有一些小夥伴並不清楚其第4個可選引數值究竟有何用？box-shadow第4個引數值，名外擴充套件，可以把投影範圍擴大，當然，擴大的區域是實色區域。我們就可以利用這一特性，模擬實現不影響元素佔據尺寸的outline實色邊框效果啦！

CSS程式碼如下：

img {
    border-radius: 1px;
    box-shadow: 0 0 0 30px #cd0000;
}

CSS3用的多的小夥伴應該知道，box-shadow的投影形狀與border-radius一脈相承，也就是border-radius是圓角的，box-shadow的投影也是圓弧形的。

下面簡單解釋下兩行CSS程式碼的含義：

• border-radius: 1px表示圓角大小1畫素。有同學可能奇怪了，怎麼是1畫素啊，截圖圓角明明好幾十畫素，下面正好就解釋了；
• box-shadow: 0 0 0 30px #cd0000出現了4個數值，分別是水平偏移0, 垂直偏移0，模糊0(純色),
  擴充套件大小30畫素。我們可以想象成，光線直接從盒子的正上方照下來，因為沒有偏移沒有模糊，我們看不到任何陰影。實際上，盒子的陰影正好就是盒子的大小（外帶1畫素圓角），此時，擴充套件30畫素，我們可以腦補一下，1畫素圓角的陰影再擴充套件30畫素。喲，不就是我們需要的效果嘛，不就是截圖展示的效果嘛！

知道border-radius 1畫素的左右了吧，擴充套件30畫素後，圓角就是30畫素大小了。

然而，雖然肉眼看不出來，上面的方法實際有瑕疵，因為圖片不是純正的直角，有1畫素的圓角。如果你想實現完美的內方外圓的效果，可以套一層標籤，外面的標籤使用border-radius和box-shadow就可以了。

結語

祝某瓊生日快樂，雖然你們倆在吃韓國料理，我在這加班寫筆記，不過我是不會記恨你的，笑~