CSS outline實作意想不到的效果

今天在微網誌看見@zhangxinxu召集各種實作了十字功能的方法。@大地dudy和@靈感_idea都想到了用outline-offset這個方法，大開眼界。我就開始關注起了這個css屬性。

這個屬性其實很簡單，就4種類型：

outline-width

outline-style

outline-color

outline-offset

那讓我們來試一試：

那不是和border很像嗎？它們又有什麼差別呢？

答：outline是位于邊框外圍的輪廓線，不會占據空間。

那我們讓outline和border一起出現試試：

得出結論：

紅色的輪廓線果然不會占據空間。這裡，我特别把body的margin和padding都設定為0，為了效果更加明顯。

輪廓線位于邊框的外圍。從效果可以看到，輪廓線位于border的外圍。

之前，并沒有看出什麼有趣的地方，那是因為outline-offset還沒有出場。

比如：

之前都沒有怎麼遇見過，難道是因為相容性特别不好？事實上，果然在相容性上有問題：

所有的ie都不相容。我親自試了下，ie11下也會有問題。那隻能默默忽略ie～很多時候，我們都因為相容性而受到束縛。

thin medium thick px ex em

outline-style: auto

outline-style: none

outline-style: dotted

outline-style: dashed

outline-style: solid

outline-style: double

outline-style: groove

outline-style: ridge

outline-style: inset

outline-style: outset

outline-style: inherit

outline-color: invert outline-color: red

outline-color: inherit

px em inherit

那...以後的一些樣式，我們是不是可以嘗試用outline來實作呢？（不考慮ie情況下）期待相遇。