CSS outline-width 属性

CSS outline-width 语法

在 CSS 中，outline-width 属性用于在元素轮廓线的宽度。outline-width 一般搭配以下 2 个属性一起使用。

语法：

outline-width: 长度值或关键字;

说明：

outline-width 属性的取值可以是一个数值，比如像素值（px）、em、rem 等。也可以是一个关键字，常用关键字取值如下表所示。

outline-width 属性取值（关键字）
属性	说明
thin	通常解析为 1px
medium	通常解析为 3px
thick	通常解析为 5px

需要注意的是，thin、medium、thick 的具体像素值由浏览器决定。虽然大多数浏览器解析为 1px/3px/5px，但在不同操作系统或浏览器下可能会有细微差异。如果需要精确控制，建议直接使用像素值。

对于 outline-width 属性，小伙伴们还要清楚以下几点。

outline-width 属性适用于所有元素。
outline-width 只有在 outline-style 不为 none 时才会生效。如果 outline-style 是 none，那么轮廓将不可见，无论你设置了什么宽度。
outline 是 outline-color、outline-style、outline-width 的简写属性，更常用于一次性设置所有轮廓相关属性。

提示: outline-width 类似于 border-width，小伙伴们可以对比理解一下。

CSS outline-width 摘要

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

CSS outline-width 示例

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

示例：outline-width 基本用法

运行代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <style>
        input {
            outline-style: solid;
            outline-color: red;
        }
        p:nth-of-type(1) > input { outline-width: 1px; }
        p:nth-of-type(2) > input { outline-width: 2px; }
        p:nth-of-type(3) > input { outline-width: 4px; }
    </style>
</head>
<body>
    <p><input type="text"></p>
    <p><input type="text"></p>
    <p><input type="text"></p>
</body>
</html>

页面效果如下图所示。

outline-width 示例

outline 是一个复合属性

outline 其实是一个复合属性，它有 3 个子属性（如下表所示）。

outline 的子属性
子属性	说明
outline-width	轮廓线的宽度
outline-style	轮廓线的样式
outline-color	轮廓线的颜色