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

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可以调整外边框到盒子的偏移距离!