CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
让我们用一个图来看一下：
光看图还不行，接下来让我们看几个例子：
在元素周围画线
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;border-width: medium;border-color: #98bf21;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>运行结果：
设置轮廓的样式
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>运行结果：
设置轮廓的颜色
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;outline-color: #00ff00;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>运行结果：
设置轮廓的宽度
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;outline-color: #00ff00;}p.c {border-style: solid;outline-width: 3px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>运行结果：
所有CSS 轮廓（outline）属性
| 属性 | 说明 | 值 | |
|---|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit | |
| outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit | |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit | |
| outline-width | 设置轮廓的宽度 | thin medium thick length inherit |
outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint
