CSS outline（轮廓）是一个简写属性，用于围绕元素外部绘制一条线。它与 a:focus 选择器结合使用特别有用，可以更加强调链接或其他元素。

outline 与 border 相似，不同之处在于 outline 在整个元素周围画了一条线；它不能像 border 那样，指定在元素的一个面上设置轮廓，也就是不能单独设置顶部轮廓、右侧轮廓、底部轮廓或左侧轮廓。

语法

outline: width | style | color

outline 简写属性可以用一个、两个或三个值声明，并且它们的顺序可以任意更换。例如：

outline: solid; /* 这仅指定样式值 */

outline: dashed #eee; /* 这将指定颜色值和样式值 */

outline: thick inset; /* 这将指定宽度值和样式值 */

outline: 1px solid pulm; /* 这将指定所有3个值 */
outline

这里需要注意两点：

  • 当仅指定一个或两个值时，其他值将解析为其默认值。outline 只需设置其 style 值即可工作。
  • 如果未定义样式，许多元素的轮廓将不可见。这是因为样式默认为 none。一个例外是 input 元素，它们由浏览器赋予默认样式。

属性

outline 属性是由三个单独属性组成的缩写，用于定义轮廓的颜色、宽度和样式。我们将在下面逐一探讨。

outline-width

定义要绘制的线的厚度。其值可以是任意长度值，也可以是以下任意关键字：

  • thin
  • medium（默认值）
  • thick 
outline-width: 2(px, em, rem) | thin | medium | thick

outline-style

outline-style 定义要绘制的线的类型。它的值可以是以下任何关键字：

  • auto
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none （默认值，没有轮廓） 
outline-style: auto | dotted | dashed | solid | double | groove | ridge | inset | outset

outline-color

设置 outline 的文字部分和装饰部分的颜色。它可以通过关键字、十六进制值、RGB/RGBA 值和 HSL/HSLA 值来指定。

如果[浏览器支持](https://caniuse.com/?search=outline-color%3A invert)，其默认值为 invert；否则，其默认值为 currentColor。

outline-color: currentColor | red | #eee | rgb(255, 255, 255) | hsl(0,0,0)

有趣的用法

尝试打开任何网站上的控制台并运行以下内容：

document.head.insertAdjacentHTML('beforeend', '<style>* { outline: 1px solid plum; }</style>')

你们会看到很多网站都是这样的结构：

outline

默认情况下，outline 用于 :focus 样式。但请记住，如果删除轮廓样式，例如：a:focus { outline: 0; }，您需要使用其他视觉上不同的样式将它们添加回来。