outline这个属性平时用的不太多，最近被问及专门研究一下这个属性的作用。
CSS2加进来的outline属性，中文翻译过来是外轮廓。
神马是轮廓？
轮廓，指边缘；物体的外周或图形的外框。
那这样的话外轮廓就是在外部的边框咯。
看一下正式的定义：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
看一下比较实际的体会：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。
暂时说完大概理解，下面继续分析。
CSS2中outline是这样设置的：
p{ outline-style:dotted;}看起来跟border没有什么区别。
看一下支持度
看起来形势一片大好，不过老式的IE6-7貌似不兼容，所以想用outline替代border的童鞋可能要失望了。可能就是这个原因所以平时用的比较少了。
outline还有一个不太常用的属性，outline-offset，设置外轮廓相对的偏移量，这里的相对可以理解为W3C上面标准的盒模型（border之内）
div { height: 100px; width: 100px; margin: 50px auto; outline: 10px solid rgba(255,255,0,9); background: black; outline-offset: 10px; border:5px solid blue; }比如这样设置之后的效果是这样的
黄色的是outline，设置了outline-offset之后往外面偏移10px，露出了后面body的背景色红色，蓝色的是border。
outline与background的关系
1 2
结果就是这样的，在body设置类背景色红色在body里面的div设置了黄色外轮廓色，外轮廓色在background上面。
块级元素、内联元素的outline
与border一样，可以同时设置内联元素或者块级元素的outline和border
1 2
虽然不太好看，不过勉强看着先把。
其实内联元素的outline和块级元素的outline的层级是不一样的。
1 2
结果是这样滴，看不懂？毛有关系，慢慢来。
首先是四个div包裹四张图片，图片就不说了。给div加了一个黄色的有点透明度的outline，给图片加了一个红色的outline。
然后捏，有木有发现，黄色的outline可以把下面的图覆盖了，二红色的outline可以把上面的覆盖却不能覆盖下面的outline。
这就是内联元素和块级元素outline覆盖的不一样。
块级元素的outline可以将上面下面元素的内容都覆盖了，而内联元素的只可以覆盖上面的元素。
看到这里累了的童鞋可以冲杯咖啡，休息一下，下面的才是重点。
下面讨论outline的层级问题（或者可以说是层叠问题）
代码如下：
结果是中间的outline覆盖了上面和下面的内容、背景、边框部分，如果给outline一个足够大的值的话，可以覆盖除了自己之外的全部屏幕。类似图中那样，如果绿色继续延伸，那么就可以铺满屏幕了。
但是如果给上面和下面两个div也加上outline的话
结果变成了这样
后面一个div的outline覆盖了前面一个div的outline
这里就不难想到outline是怎么样的了，outline如同相框的框，在内容（照片）上面。而且在页面靠后的元素的outline会覆盖前面一个的outline。
或者可以这么理解：页面绘制Render Tree（渲染树，或者说呈现树那里)，按照绘制的先后顺序绘制轮廓（outline），其实其他样式如果特殊性一样，也是后面的会覆盖前面的样式，一样的道理。
如果浮动了呢？
1 2
上图第二个div是浮动的，神奇的是第一个div的outline居然出来了。跟最后一个div一样的情况。这里尝试加点文本进去，结果是文本是在outline之上的。
也就是说此时outline是在普通background和border上面，在普通的outline和内容的下面。
如果定位了呢？
1 2
相对定位relative之后就跑到上面来了，绝对定位absolute也是一样，固定定位fixed亦是一样。这里是没有设置z-index的情况下，如果设置了z-index则可以顺便更改div的层叠顺序，也就包含了outline的层叠顺序。
总结：outline的层级顺序是这样的
- outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。
- 通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）
- 如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）
- 如果页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素之后，显示正常的文档流，之后再显示定位的元素（不设置z-index情况下，设置的话等于浏览器又执行了其他命令），当然定位的元素可以用z-index属性把元素在前后挪来挪去，不过现在讨论的是在不设置z-index下默认浏览器对outline的显示情况。
- 其实outline大部分都不会像border那样用，outline的作用上面也说了，只是浏览器默认的那条小小的虚线而已，一般还要消除掉的。比如outline:none;
That's all.Thanks