css中 outline 的使用

CSS中outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的做用。

例如：在浏览器里，当鼠标点击或使用Tab键让一个连接或者一个radio得到焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。

 

1、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; 也是容许的

 

2、outline与border的区别

1.outline是不占空间的，既不会增长额外的width或者height
2.outline有多是非矩形的

3、outline的层级顺序

一、outline在不一样的格式化上下文呈现是不同的，在块级元素里面是能够覆盖上下两边的内容的。在内联元素之能够覆盖上面的内容。

二、一般状况下outline会按照后面覆盖前面的顺序正常显示（同等状况下，如同在文档流里面都没有浮动，或者都是浮动，定位的有z-index不算）

三、若是页面有浮动元素，则先显示浮动元素的outline，再显示正常文档流的outline（浮动元素的outline被没有浮动元素的outline覆盖）

四、若是页面有定位元素（relative，absolute，fixed不包括static），则在显示浮动元素以后，显示正常的文档流，以后再显示定位的元素（不设置z-index状况下，设置的话等于浏览器又执行了其余命令），固然定位的元素能够用z-index属性把元素在先后挪来挪去，不过如今讨论的是在不设置z-index下默认浏览器对outline的显示状况。

参考资料：  css中outline   http://www.studyofnet.com/news/995.html