CSS outline 属性

CSS outline 语法

在 CSS 中，outline 属性用于在元素周围绘制一条轮廓线。outline 是一个复合属性，它是以下 3 个属性的简写。

语法：

outline: width style color;

说明：

width 是 outline-width 的值，style 是 outline-style 的值，color 是 outline-color 的值。

对于 outline 属性，我们需要清楚以下几点。

outline 属性与 border 属性很相似，你可以把 “轮廓线（outline）” 看成是一条 “特殊的边框（border）”。
outline 属性大多数情况下用于文本框（input、textarea 等），比较少用于其他元素。
outline 是不占用空间的，不会增加额外的 width 或 height 。

提示: outline 属性适用于所有元素。它不会影响布局，主要用于提高可访问性，增强用户体验。

CSS outline 摘要

属于	CSS 用户界面属性
使用频率	中
是否继承	否
默认值	各子属性的默认值
兼容性	查看
官方文档	查看
MDN	查看

CSS outline 示例

接下来，我们通过几个简单的例子来讲解一下 CSS outline 属性是如何使用的。

示例 1：outline 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        input[type="text"] {
            outline: 2px solid red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

页面效果如下图所示。

outline 基本用法

分析：

input[type="text"] 表示使用属性选择器选中文本框。此外，outline: 2px solid red; 等价于下面代码：

outline-width: 2px;
outline-style: solid;
outline-color: red;

在实际开发中，更多时候我们希望的是在文本框聚焦时再显示 outline，而不是一开始就显示 outline，此时可以使用 :focus 选择器来实现，请看下面例子。

示例 2：文本框聚焦时使用 outline

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        input[type="text"]:focus {
            outline: 2px solid red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

默认情况下，页面效果如下图 1 所示。当单击文本框之后，页面效果如下图 2 所示。

文本框默认效果

文本框聚焦时使用outline的效果

分析：

“:focus” 选择器用于定义当文本框获得焦点时的样式。

示例 3：使用 outline-offset 创建呼吸感

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        input:focus {
            outline: 2px solid blue;
            outline-offset: 4px;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

页面效果如下图所示。

使用 outline-offset 创建呼吸感

分析：

outline-offset: 4px; 表示将轮廓线向外偏移 4px，此时我们可以看到一个非常漂亮的、不贴边的蓝色光圈。