轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓样式
与边框类似，轮廓最基本的方面是样式，如果一个轮廓没有样式，轮廓将根本不会存在。与边框不同的是，值少了一个hidden
outline-style
值: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
初始值: none
应用于: 所有元素
继承性: 无
轮廓宽度
与边框类似，轮廓宽度不能为负数，也不能指定为百分比值
outline-width
值: thin | medium | thick | <length> | inherit
初始值: medium
应用于: 所有元素
继承性: 无
[注意]如果轮廓的样式是none，则轮廓宽度计算值为0
轮廓颜色
与边框不同，轮廓颜色有关键字invert反色轮廓，代表对轮廓所在的像素完全反色转换，使轮廓在不同的背景颜色中都可见。但实际上invert关键字只有IE浏览器支持，其他浏览器的轮廓颜色是元素本身的前景色
outline-color
值: <color> | invert | inherit
初始值: invert(IE)、前景色(其他浏览器)
应用于: 所有元素
继承性: 无
轮廓偏移
轮廓偏移用来定义轮廓的偏移位置的数值。当参数值为正数时，表示轮廓向外偏移；当参数值为负值时，表示轮廓向内偏移
[注意]IE浏览器不支持
outline-offset
值: length | inherit
初始值: 0
应用于: 所有元素
继承性: 无
轮廓简写
轮廓outline类似于边框样式的border属性，允许一次完成轮廓样式、宽度和颜色的设置。由于给定轮廓必须采用某种统一的样式、宽度和颜色，所以outline是关于轮廓的唯一简写属性。对于轮廓没有诸如outline-top或outline-right之类的属性
[注意]outline中并没有包括outline-offset，需要对outline-offset进行单独设置
outline
值: [<outline-color> || <outline-style> || <outline-width>] | inherit
初始值: 无
应用于: 所有元素
继承性: 无
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓案例</title>
<style>
p {border:1px solid yellow;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
</body>
</html>
下一节