CSS 轮廓 outline

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

• 只有在规定了 !doctype 时，IE8及以上版本才支持outline

CSS 的 outline 属性允许我们改变这个默认的轮廓虚线框效果。其属性有：

• outline
  速写形式，格式为：outline: outline-color || outline-style || outline-width

• outline-color
  规定边框的颜色。

• outline-style
  规定边框的样式。

• outline-width
  规定边框的宽度。

• outline-offset
  对轮廓进行偏移，并在边框边缘进行绘制。
  如下例所示即为规定边框边缘之外 15 像素处的轮廓：

div{
  border:2px solid black;
  outline:2px solid red;
  outline-offset:15px;}

outline和border的区别

• outline 不会象border那样影响元素的尺寸或者位置，outline不占据空间。

border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。