outline小技巧

outline是干什么的

定义
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

以上是但w3c上说明。但我的理解是，它跟border是一样是元素的边框，但是它又有别于border：outline 他的大小不会计算到元素上，不会影响布局，而border是会的。
如：

.box{width:300px; outline:3px solid #eee;}/*这里的的box的宽度为300*/
.bod{ width:330px; border:3px solid #eee}/*这里的box的宽度为306*/

怎么用

相信你已经知道怎么用了，就跟border一样的用。语法如下

outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit

也可以像border那样分开写

.box{
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

使用场景

看了其它例子一般用在元素的:active 上，用来标明突出元素正在被点击。但其它可以用它代替掉border的。
像这种.active状态，当前状态的图片加一个边框，如果使用border加的话，会改变原来布局。但使用outline完全没问题

.]

支持程度

firefox下的特殊性

这东西好用是好用，代替个border也没什么问题，但是我发现这货在firfox搞特殊，
其它浏览器是以设置了outline的元素的高度（宽度）上添加的边框
在火狐下，是以设置了的outline的元素的所有子元素，包含隐藏的元素的高度（宽度）上添加边框
不太好理解哈？看例子链接描述
其它浏览器都这样

firefox下却多了一大截大底部。

outline是把元素的所有子孙元素最大的那个为基准来定的高宽，像上面这个例子ul.w-select-ul已经设置了absolute，但outline还是为它预留高度
而其它浏览器则是以元素实际的高度设置

这种情况避免使用outline，或者为元素加上overflow: hidden;