13. 轮廓outline

轮廓是什么

轮廓是绘制在元素边框外围的一条线。它不占据空间，也不影响元素尺寸。

.box {
  border: 2px solid #333;
  outline: 2px solid red;
}

上面这段代码，盒子有一个 2px 的灰色边框，外面再套一个 2px 的红色轮廓。

轮廓与边框的区别

轮廓和边框看起来很像，但有几个关键区别：

特性	边框 border	轮廓 outline
位置	贴着元素边缘	画在边框外侧
占空间	占据空间，影响尺寸	不占空间，不影响尺寸
形状	跟随 border-radius	跟随 border-radius（现代浏览器）
单边	可以单独设置四边	只能画完整一圈
用途	装饰、分隔元素	突出显示、焦点提示

轮廓三要素

和边框一样，轮廓也由三部分组成：

.box {
  outline-style: solid;   /* 样式 */
  outline-width: 3px;     /* 宽度 */
  outline-color: red;     /* 颜色 */
}

轮廓样式 outline-style

.dotted { outline-style: dotted; }   /* 点线 */
.dashed { outline-style: dashed; }   /* 虚线 */
.solid  { outline-style: solid; }    /* 实线 */
.double { outline-style: double; }   /* 双线 */
.none   { outline-style: none; }     /* 无轮廓 */

轮廓宽度 outline-width

.thin   { outline-width: thin; }     /* 约 1px */
.medium { outline-width: medium; }   /* 约 3px */
.thick  { outline-width: thick; }    /* 约 4px */
.px     { outline-width: 5px; }      /* 精确控制 */

轮廓颜色 outline-color

.red  { outline-color: red; }
.blue { outline-color: #3498db; }
.inv  { outline-color: invert; }  /* 反色，自动对比 */

invert 是一个特殊值，它会自动选择与背景对比明显的颜色。常用于无障碍场景。

简写属性 outline

和 border 一样，outline 也支持简写：

/* outline: 宽度 样式 颜色 */
outline: 2px solid red;

/* 只写样式，宽度和颜色用默认值 */
outline: solid;

轮廓偏移 outline-offset

outline-offset 可以在轮廓和边框之间加一段间距：

.box {
  border: 2px solid #333;
  outline: 2px solid red;
  outline-offset: 10px;  /* 轮廓往外偏移 10px */
}

这段间距是透明的，会露出底色。

实际用途

轮廓最常见的用途是表单元素的焦点提示：

/* 输入框获得焦点时的蓝色光圈 */
input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

浏览器默认会给焦点元素加轮廓，这是无障碍设计的重要部分。