CSS 轮廓 outline

轮廓是在元素边框外绘制的一条线。为元素添加合适的轮廓，能够使元素更加突出。

轮廓外观与边框类似，但是完全不同，轮廓在边框之外，但是不占用空间，有可能会覆盖掉周围的元素。

CSS 提供了以下轮廓属性：

• outline-style: 轮廓的样式
• outline-color: 轮廓的颜色
• outline-width: 轮廓的宽度
• outline-offset: 轮廓的偏移量
• outline：轮廓的简写属性

CSS 轮廓样式

outline-style 属性指定轮廓的样式，可选值包括：

• none - 无轮廓
• hidden - 隐藏的轮廓
• dotted - 点状虚线轮廓
• dashed - 短线虚线轮廓
• solid - 实线轮廓
• double - 双实线轮廓
• groove - 有雕刻效果的轮廓
• ridge -有浮雕效果的轮廓
• inset - 有陷入效果的轮廓
• outset - 有突起效果的轮廓

不同轮廓样式的演示：

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;
}

注意： outline-style 是必须的属性，否则其他轮廓属性都不会有效果。

轮廓间隙

outline-offset 属性用于设置轮廓和元素的边缘或边框之间添加间隙。元素与其轮廓之间的空间是透明的，它们之间的颜色会继承父元素的背景色。

该段落在边框边缘外有 15px 的轮廓。

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

所有 CSS 轮廓属性