大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏,理解更多前端常识! 点我摸索新世界！
原文链接 ==>http://sylblog.xin/archives/39
前言
日常开发中，咱们常常应用border来给元素减少一些美感，然而因为盒子模型的存在，border有时候会影响咱们的判断，所以明天咱们来介绍另一个属性来为元素减少一些美感。
outline
outlineCSS 中的属性在元素的内部绘制一条线。它相似于边界，除了：
- 它总是围绕所有边，你不能指定特定的边
- 它不是盒模型的一部分，因而不会影响元素或相邻元素的地位，也就是说outline outline不占据空间
- 它并不总是矩形
兼容性
除了IE浏览器，其余浏览器兼容性还是不错的。
语法
outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit
由此可见outline也是一个缩写的属性。
outline: 1px dashed red;
不占空间
首先定义一个p标签和一个div标签，而后div标签定义一个5px的border和一个20px的outline
p {
outline: 1px dashed red;
}
div {
border:5px solid #000;
outline: 20px dashed red;
}
<p>outline: 1px dashed red;</p>
<div>outline: 20px dashed red;</div>最终的成果，能够分明的看到div上定义的outlin曾经跑到了p标签上。
不一是矩形
应用span进行测试，应用br进行换行，使得每一行的字数都不一样。
<span>我是outline<br />
我能够创立非矩形<br />
的边框</span>
span {
outline: 1px dashed red;
}最终成果，能够看见outline只在字下面有。
换成border咱们再试试
border:1px solid #000;
乍一看，如同border创立的也是不规则的呀，然而再认真看，边框其实并不是不规则的，只是换行了而已。
outline-style 轮廓款式
属性值
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-color 轮廓色彩
色彩值
outline-color: invert;
invert (IE兼容）
经测试：最新版的chrome和火狐浏览器不反对此值
仅在IE中测试应用
比照
页面的背景色彩是红色，outline就是彩色。
` outline-color: invert;
`
页面的背景色彩是彩色，outline就是红色。
outline-width 轮廓宽度
属性值
thin
1px
medium
3px
thick
5px
\<length\>
outline-width: 10px;
outline-offset 轮廓偏移
数值
当参数值为负数时，示意轮廓向外偏移 outline-offset: 10px;
当参数值为负值时，示意轮廓向内偏移
outline-offset: -10px;