outline在元素外绘制线框，和border很像，css公式都一样，但是“轮廓线不会占据空间，也不一定是矩形”，例如下图的红色outline线遮盖了下面box1的部分背景，box和box1是无缝隙的，border和box是在平面上一个层次（类似position定位的z-index），outline在谷歌高于box的层级

html5利用outline实现双边框效果-QUI-Notes

outline用法 

outline：outline-width | outline-style | outline-color
outline-color——规定边框的颜色
outline-style——规定边框的样式

  1. none 默认。定义无轮廓。
  2. dotted 定义点状的轮廓。
  3. dashed 定义虚线轮廓。
  4. solid 定义实线轮廓。
  5. double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
  6. groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
  7. ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
  8. inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
  9. outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
  10. inherit 规定应该从父元素继承轮廓样式的设置。

outline-width——规定边框的宽度

另外一个css：outline-offset可以调整外边框到盒子的偏移距离！