什么是大纲？顾名思义，outline就是一个元素的轮廓。其实我们很少设置元素的轮廓样式，所以很多人都不太了解。默认情况下，浏览器会为许多特定元素（例如标签、输入框等）的某些行为添加轮廓样式。当你使用键盘tab键选择这些元素时，会有一个外框供键盘侠操作。以前一直以为outline的样式只存在于特定的元素比如表单元素上。。。其实它适用于所有的元素，但是大部分的应用场景都是在表单这样的元素上，从样式，和border一模一样，是真儿子。大纲样式表现知道什么是大纲后，可以直接从一个直观的输入框观察它的具体属性是如何设置的。这样一个没有任何设置的输入框会触发focus事件，chrome浏览器中的默认表现是这样的：这个蓝色的小框是windows下chrome中的默认表现，它的默认样式设置如下：input:focus,textarea:focus,select:focus{outline-offset:-2px;}useragentstylesheet:focus{outline:-webkit-focus-ring-colorauto5px;}先来看outline-offset，He表示轮廓的偏移量，也就是相对于边框的偏移位置。或者如果他是边境之子，你对天空的偏移量也是基于你妈妈的233。默认是-2px，所以我们可以看到效果是遮住边框。那是不是说offset设置为0，轮廓图就会扩大？试试吧，更不用说0了，设置成10px后，还是看不出任何效果，还是原来的样子。为什么？然后看outline:-webkit-focus-ring-colorauto5px;，说他是border的儿子，体现在这里。和border的缩写一样，outline是outline-widthoutline-styleoutline-color的缩写。这种默认样式的细心朋友会立刻注意到，5px的轮廓根本没有显示出来。是的，问题就出在他前面的auto属性值上，也就是outline-style的属性值。默认为自动时，表示轮廓。基本样式取决于浏览器……其实不用深究。根据我的测试，如果outline-style样式保持为auto，则只能更改outline-color。这个浏览器的决定还是很多的，所以如果要自定义样式，首先要将outline-style改成other，常用的是solid。轮廓样式：实心；轮廓偏移：2px；修改以上两个属性后，样式变成如下：可以看到5px的轮廓！并且距离黑色边框有2px的距离。那么很多人会问，既然如此，那么outline有什么用呢？边界不能满足需求吗？这道题不能说outline现在真的少不了，因为box-shadow已经可以达到同样的效果了。有兴趣的朋友可以多了解一下。但是只有边界真的是不够的。下面我们介绍一下它们的异同，也揭示了为什么会有大纲。outline和border的主要区别是outline不占空间。这一点很重要，因为边框是盒模型最外层的坚定守护者。如果无事可做，会影响页面布局。如果你能移动布局，它当然不会移动。现在，这个时候用轮廓来突出风格是最合适的。轮廓没有圆角。毕竟我还是个孩子，没跟妈妈学过border-radius，不过我想以后会加上的，慢慢长大。（fire-fox已经实现了，我没测试过。。。这台电脑没有安装）如果想实现圆角，可以使用box-shadow参考张新旭的博客。参考两种outline-style的区别
