当元素获得焦点的时候，焦点框为0.
比如说当前这个网页，你用tab键切换的时候，文字链接、搜索框、按钮等的外面会有一个虚线框（或高亮框），此时当前的元素就获得了焦点，你可以对它进行操作。
这个功能一般是为使用键盘操作的用户准备的。
有些链接——比如一个图片链接，你不想让他出现虚线框破坏设计感，就可以用此方法。
建议一般不要去掉，只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。
定义和用法
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
注释：轮廓线不会占据空间，也不一定是矩形。
默认值： none
设置轮廓的样式：
p
{
outline-style:dotted
}
浏览器支持
所有主流浏览器都支持 outline-style 属性。
只有在规定了 !DOCTYPE 时，Internet Explorer 才支持 outline-style 属性。
可能的值
值 描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
border: 边框的意思它包含 边框宽度 border-width, 边框样式 border-style , 边框颜色 border-color
比如，border:1px solid red 表示的是 边框宽度为1px 的实线(也可以为虚线，这个就是边框样式) ，边框颜色为red.
任何标签都具有这个CSS属性...
1.border设置元素主要的边框属性，包括border-width、border-style、border-color，可缺省，无固定顺序。
e.g.
[css] view plaincopy
border: red 10px solid
border: 5px blue
border-style
统一设置元素各边框的格式，按照CSS顺序规则。可取的值如下表所示：
CSS顺序规则：当值有4个时，依次按照上、右、下、左设置；当值有3个时，依次按照上、左右、下设置；当值有2个时，依次按照上下、左右设置；当值只有1个时，则为4个方向设置为相同的值。以本属性为例：
[css] view plaincopy
border-style: soliddotted dashed double
/*
上边框为实线
右边框为点状
下边框为虚线
左边框为双线
*/
border-style: solid dotteddashed
/*
上边框为实线
左右边框为点状
下边框为虚线
*/
border-style: soliddotted
/*
上下边框为实线
左右边框为点状
*/
border-style: solid
/*
4个方向的边框都是实线
*/
border-style的默认值为border-style:none。
border-width
统一设置元素各边框的宽度，按照CSS顺序规则。只有当border-style不为none时才有效。不能设置为负值。值可以是thin（细）、medium（中等）、thick（粗），也可以是数值。默认为border-width: medium。
border-color
统一设置元素的各边框颜色，按照CSS顺序规则。当border-style为none或hidden时失效，所以在设置边框颜色前需要保证border-style的值不为none、hidden。值可以是任意CSS支持的颜色值。默认为border-color: transparent。
border-top、border-right、border-bottom、border-left
设置元素的上/右/下/左边框的主要属性，包括border-***-style、border-***-color、border-***-width，可缺省，无固定顺序。
border-top-style、border-right-style、border-bottom-style、border-left-style
设置元素上/右/下/左边框的样式，取值与border-style相同，默认为none。
border-top-width、border-right- width、border-bottom-width、border-left- width
设置元素上/右/下/左边框的宽度，取值与border-width相同。只有当border-***-style不为none时才有效，不能为负值，默认为medium。
border-top-color、border-right- color、border-bottom-color、border-left- color
设置元素上/右/下/左边框的颜色，取值与border-color相同。只有当border-***-style不为none和hidden时才有效。默认为transparent。
2.outline（轮廓）
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。
e.g.
[css] view plaincopy
outline: solid black
outline: dotted thin #0000ff
outline-style
设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width
设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。
outline-color
设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。
总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height
2.outline有可能是非矩形的
