外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
outline属性早在 CSS2 中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在 CSS3 中对outline作了一定的扩展，在以前的基础上增加新特性。
outline 属性的基本语法如下：
outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过 CSS3 给outline属性增加了一个outline-offset属性，其取值说明如下。
| 属性值 | 属性值说明 |
outline-color |
定义轮廓线的颜色，属性值为 CSS 中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 |
outline-style |
定义轮廓线的样式，属性为 CSS 中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为 none，省略后不对该轮廓线进行任何绘制。 |
outline-width |
定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为 medium，表示绘制中等宽度的轮廓线。 |
outline-offset |
定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 |
inherit |
元素继承父元素的outline效果。 |
例如：
我们制作双色边框效果。
HTML 代码：
<div></div>
CSS 代码：
div {
padding: 20px;
margin: 30px;
outline: red solid 2px;
border: 2px solid green;
}
效果如下：
