css中 outline 的使用_html/css_WEB-ITnose
例如：在浏览器里，当鼠标点击或使用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有可能是非矩形的
三、outline的层级顺序
1、outline在不同的格式化上下文呈现是不一样的，在块级元素里面是可以覆盖上下两边的内容的。在内联元素之可以覆盖上面的内容。
2、通常情况下outline会按照后面覆盖前面的顺序正常显示（同等情况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）
3、如果页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）
4、如果页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素之后，显示正常的文档流，之后再显示定位的元素（不设置z-index情况下，设置的话等于浏览器又执行了其他命令），当然定位的元素可以用z-index属性把元素在前后挪来挪去，不过现在讨论的是在不设置z-index下默认浏览器对outline的显示情况。
参考资料： css中outline http://www.studyofnet.com/news/995.html