outline与border的异同：

边框的设定在web设计中使用率非常的高，border:1px solid #00f;属于标准的边线写法，也可以实现单方向边线border-left:1px solid red;

在CSS标准盒模型中，边线border是计算在容器总宽度和高度之中的，

但随着web布局要求越来越高，自适应布局应用逐渐广泛，横向排布四个div 各占据四分之一的宽度，但如果某一个要有边线border修饰，因为border是占据宽度的，最终会导致最后一个元素掉下来，因为实际宽度大于了总宽度。

outline可以实现和border相同的效果，标准语法也基本相同(outline:1px solid red)，也支持outline-style，outline-width，outline-color等分散属性。

但是outline不占位，不会增加元素的宽高。

outline缺点：

①不支持圆角 outline-radius:3px;

②不支持单方向outline。

outline在文本框中的作用：

默认的文本框input[type="text"]获取光标时会有边线高亮。

实际上高亮的部分为outline在起作用

使用outline:none，可以去除默认文本框获取光标时出现的边线

.outline{
		/*标准写法*/
		outline:1px solid red;
		/*单方向边线*/
		outline-left:4px solid #000; 
	}
	.outline:focus{
		/*去除默认边线*/
		outline: none;
	}

outline作为一个特殊的属性存在，在特殊的场景中会产生很棒的效果，灵活使用才能发挥出最大作用。