CSS中outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
例如：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。
一、outline可以按顺序设置如下属性
outline-color ：设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。
outline-style ：设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width：设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的
二、outline与border的区别
1.outline是不占空间的，既不会增加额外的width或者height 2.outline有可能是非矩形的
3、例如
<div class="demo"></div> <style> body { margin: 0; padding: 0; } .demo { width: 100px; height: 100px; background: pink; border: 10px solid #ccc; outline: 10px solid red; } </style>效果图
三、outline的层级顺序
1、outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。
2、通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）
3、如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）
4、如果页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素之后，显示正常的文档流，之后再显示定位的元素（不设置z-index情况下，设置的话等于浏览器又执行了其他命令），当然定位的元素可以用z-index属性把元素在前后挪来挪去，不过现在讨论的是在不设置z-index下默认浏览器对outline的显示情况。
5、其实outline大部分都不会像border那样用，outline的作用上面也说了，只是浏览器默认的那条小小的虚线而已，一般还要消除掉的。比如outline:none。
