CSS 的 outline 属性

CSS 的轮廓(outline)属性有点像边框(border)属性，但两者还是有明显不同之处的。我们先看一个例子：

div#test {
     100px;
    border: 1px solid #000000;
    outline: 3px solid #6688AA;
}

可以看到在宽度为 1px 的 border 外面由多了一层宽度为 3px 的 outline。考虑到两者的写法也一致，为何有了 border 还需要 outline 这个属性呢？

实际上，outline 和 border 的最大区别在于，它不占用空间，无论 outline 多宽也不会影响正常的页面流。所以，可以将 outline 理解为文档的批注。它用于网页布局的调试非常方便。

第二个区别是，outline 只能统一设置，不能像 border 那样对各边设置不同的样式。第三个区别是，对行内元素 outline 可以是折线。

CSS2 标准中说明 outline-color 也可以设置为 invert，这时候 outline 的颜色将与背景颜色相反，以保证 outline 始终可见。但是这个功能只有 IE8+ 和 Opera 7+ 支持，Firefox 由于其它原因从 3.0 版本开始也去掉这个功能了。

CSS3 标准中还增加了 outline-offset 属性，可以设置 outline 相对元素的位置。这个属性主流浏览器中除了 IE 都支持。

浏览器的默认样式一般不会设置 outline，除了 Chrome 和 Firefox 对于 textarea 默认就有 1px 宽的轮廓。 

参考资料：
[1] W3C CSS2 - the 'outline' property
[2] CSS2 - Outline
[3] W3C CSS3 - ‘outline-offset’ property
[4] outline - CSS | MDN
[5] outline-offset - CSS | MDN