outline和他娘亲border两三事

outline是啥？

outline顾英文名思义就是元素的轮廓，其实一般我们很少去设置元素的outline样式，因此很多人对他不太了解。浏览器默认给很多特定元素的某些行为加上了outline样式，比如a标签、input输入框等。当你用键盘tab键选中这些元素时候都会有一个外边框方便键盘侠操作。我以前一度以为outline这种样式只存在于表单元素等特定元素上...其实他对所有元素都适用的，只不过应用场景大多在表单等元素上，而且从样式的规则设置来看跟border如出一辙，简直是亲儿子。

outline样式表现

知道了啥是outline后，就直接从一个直观的input框来观察其具体属性是怎么设置的。

<input type="text">

这样什么都不设置的输入框触发focus事件后在chrome浏览器下的默认表现就是这样的：

这个小蓝框就是windows下chrome中默认的表现，他默认的样式设置如下：

input:focus, textarea:focus, select:focus {
    outline-offset: -2px;
}
user agent stylesheet
:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

首先我们来看outline-offset，他代表outline的偏移量，就是相对于border的偏移位置，要不说他是border的亲儿子呢，你偏移到天上也是以你麻麻为基准的233。默认是-2px所以我们就看到效果是遮住了border，那是不是把偏移设置为0就能看到轮廓像外扩了？尝试下，别说0了设置为10px后仍然看不到任何效果还是原来的样子，为什么呢？
那就要来看outline: -webkit-focus-ring-color auto 5px;，说他是border亲儿子，就体现在这里，跟border缩写一样，outline是outline-width outline-style outline-color的缩写。
这个默认样式细心的朋友马上就会注意到5px的轮廓根本没有展示出来嘛，对的，问题就在他前面的auto属性值，也就是outline-style的属性值，默认是auto时候意味着轮廓的基本样式都取决于浏览器了...其实也不用深究，根据我的测试如果outline-style样式保持auto的话也就只能改改outline-color了，这个浏览器的决定的还是很多的，因此如果要自定义样式，必须首先把这个outline-style改为其他，常用的也就是solid。

    outline-style: solid;
    outline-offset: 2px;

修改了上面两个属性后，样式变为下面这个样子：

可以看到5px的轮廓了！并且距离黑色的边框有2px的距离。那很多人会问既然这样那要outline有什么用呢？border不能满足需求么，这个问题现在不能说outline真得不可或缺，因为box-shadow已经可以达到同样的效果，感兴趣的朋友可以去了解下。但是只有border确实是不行的，下面我们引出了他们的异同，也就揭示了为什么要有outline。

outline和border的不同

主要差异就两点

• outline不占据空间，这个非常重要，因为border可是盒模型的最外层的坚定守护者，没事乱动是会影响页面布局的，能不动布局当然不动了，这个时候用outline来突出显示样式是最合适的。
• outline没有圆角，毕竟还是个孩子，没有从麻麻那里学会border-radius，不过我觉得以后真得会加上的，会慢慢长大的。（fire-fox已经实现，我没测试...这电脑没装）

如果要实现圆角可以用box-shadow参考张鑫旭大大博客。

参考

• 两者差异
• outline-style