css中outline

css中outline

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、例如

<li class="demo"></li>

<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。