CSS outline 属性

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; }，您需要使用其他视觉上不同的样式将它们添加回来。