outline这个属性平时用的不太多，最近被问及专门研究一下这个属性的作用。
CSS2加进来的outline属性，中文翻译过来是外轮廓。
神马是轮廓？
轮廓，指边缘；物体的外周或图形的外框。
那这样的话外轮廓就是在外部的边框咯。
看一下正式的定义：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
看一下比较实际的体会：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。
暂时说完大概理解，下面继续分析。
CSS2中outline是这样设置的：
p{
outline-style:dotted;
}
看起来跟border没有什么区别。
看一下支持度
看起来形势一片大好，不过老式的IE6-7貌似不兼容，所以想用outline替代border的童鞋可能要失望了。可能就是这个原因所以平时用的比较少了。
outline还有一个不太常用的属性，outline-offset，设置外轮廓相对的偏移量，这里的相对可以理解为W3C上面标准的盒模型（border之内）
div {
height: 100px;
width: 100px;
margin: 50px auto;
outline: 10px solid rgba(255,255,0,9);
background: black;
outline-offset: 10px;
border:5px solid blue;
}
比如这样设置之后的效果是这样的
黄色的是outline，设置了outline-offset之后往外面偏移10px，露出了后面body的背景色红色，蓝色的是border。
outline与background的关系
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Examples</title> 7 <style type="text/css"> 8 div { 9 height: 100px; 10 width: 100px; 11 margin: 50px auto; 12 outline: 10px solid yellow; 13 background: gray; 14 } 15 16 body { 17 background: red; 18 } 19 </style> 20 </head> 21 22 <body> 23 <div> 24 啦啦啦啦啦啦 25 </div> 26 </body> 27 28 </html>