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