outline-width

outline-width CSS 属性指定元素轮廓的粗细。 什么是轮廓？ 轮廓 是围绕元素绘制的一条线，它位于边框边缘之外，用于元素处于焦点时进行辅助功能或装饰目的。

button:focus {
  outline-width: 5px;
}

我们通常使用包含 outline-width 的简写属性设置元素的轮廓。

a:focus {
  outline: 5px solid gray;
}

outline-width 是 outline 简写中的一个组成属性，它是在 CSS 基本用户界面模块级别 4 规范中定义的，该规范目前处于编辑草案状态。

语法

outline-width: <line-width>

/* where */
<line-width> = <length> | thin | medium | thick

• 初始值： medium
• 应用于：所有元素
• 继承：否
• 计算值：绝对长度；如果轮廓样式为 none，则为 0
• 动画类型：按计算值

值

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.2em;
outline-width: 0.2cm;

/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;

• <length>: 将轮廓粗细设置为 <length>，例如 2px、0.1rem。
• thin: 等效于桌面浏览器中的 1px，但在不同用户代理之间可能会有所不同。
• medium: 默认值。 它在桌面浏览器中相当于 3px，但在不同用户代理之间可能会有所不同。
• thick: 等效于桌面浏览器中的 5px，但在不同用户代理之间可能会有所不同。
• initial: 应用属性的默认设置，即 medium。
• inherit: 采用父元素的 outline-width 值。
• unset: 从元素中删除当前 outline-width。

示例

以下示例使文本输入的轮廓在获得焦点时变厚。

input {
  outline: 1px solid lightblue;
}

input:focus {
  outline-width: 3px;
}

演示

浏览器支持

IE	Edge	Chrome	Firefox	Safari	Opera
8+	全部	全部	全部	全部	全部

iOS Safari	Android Chrome	Android Firefox	Android 浏览器	Opera Mobile
全部	全部	全部	92	64

更多信息

• CSS 基本用户界面模块级别 4
• MDN 文档

相关帖子

相关