border和outline区别

2019-03-02-14:52：

在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。

outline 能告诉用户那一个可以激发事件的html元素获取了焦点，对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。另一方面，outline 也有些讨厌的地方，比如使用CSS设计的Tab(标签页)时，选择一个Tab之后，Tab上的轮廓虚线会一直显示，有些影响美观。

order 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需 JavaScript 配合 CSS 来控制。

outline 不会象 border 那样影响元素的尺寸或者位置。

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

用css实现凹凸形状，如图：

屏幕快照 2019-03-02 下午2.52.46.png

.ao {
      display: inline-block;
      width: 0;
    }
 .ao:before {
    content: "love你love";
    outline: 2px solid #cd0000;
    color: #fff;
}

利用连续英文单词不换行的特性，我们就可以控制什么地方“凹”，什么地方“凸”啦!