初识outline
当第一次遇见outline时，压根就没有多注意这个标签，感觉没什么卵用，都有border这个强大的边框助手，还有你什么事呢！直到——在最近刚出的一本css书籍《css secrets》中，看到了outline的独特之处，他不占据空间啊。
来看一看outline的知识点 张鑫旭
border近亲
outline和border是近亲，为什么这么讲呢？首先，都是给元素外面套框框的；其次，支持的属性值几乎都是一样的，例如，outline-style和border-style值dotted, dashed, solid, …之类的，一些语法也几乎一样。如果这都不算近亲，你让绝对定位和浮动何言以对。IE8+支持
outline严格来讲属于CSS3属性，但是IE8+浏览器就支持了。外挂一句，IE9+浏览器的outline还支持invert，专门针对outline-color. 所以，如果你的项目不用管IE6/IE7浏览器，可以把outline挂在心中，有时候说不定会帮忙。不占据空间
默认的盒模型下，假设元素100X100像素，我们给元素设置border:10px solid，则实际该元素占据的尺寸至少就是120120像素，元素的偏移、布局啊什么的，就需要多多思量。但是，outline不一样，你哪怕outline:100px solid，元素占据的尺寸还是100100像素。这种行为表现，与transform以及box-shadow等CSS3属性很类似，虽然外形丰满了，但是，占据的真实空间没有影响。于是，我们在实现一些交互效果的时候，例如hover变化，我们就可以专注于效果本身，而不用被布局所左右，是很棒的体验。- 圆角效果仅支持Firefox
由于目前还只是FireFox浏览器私有的属性，因此，目前的使用需要加-moz-前缀，也就是-moz-outline-radius.
box-shadow
之所以引出outline是因为，我在做一个滑动门标签页导航时，给每个标签添加了一个border边框，由于边框占据实际的像素，会导致每次hover上去的时候会有整体的宽度的改变，影响实际的体验和美观，这种情况在一些小的网站上经常会有出现。
我第一时间想到的解决办法是使用outline，因为它完全不需要占用空间，但是问题出在outline没有广泛支持的圆角属性，这就不得不求助于其他渠道，那就是box-shadow，它的功能可以类似于outline，也是不需要占用额外的空间，但是更好的地方在于box-shadow不仅可以随意设置各个圆角大小，而且可以设置为内阴影和外阴影，这个就很强大了,box-shadow的设置很简洁box-shadow:inset 0 0 0 1px red;
inset意思就是内阴影，其他属性依次为水平偏移、垂直偏移、模糊半径、扩展大小、阴影颜色。这就完全避免了宽度跳动的问题。
除此之外，还有一个讨巧的做法就是为每个tag事先加一个颜色一样的border，也就是事先占好了一个border像素的位置，这样到时候只需要改变这个border的颜色即可。这样就避免了第一个demo中的宽度跳动的问题了，但是不太推荐这样做，更推荐第二种box-shadow的那种做法。
