outline-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

outline-width CSS 属性设置元素轮廓的粗细。轮廓是绘制在元素周围的线,位于 border 之外。

尝试一下

在定义轮廓的外观时,通常使用简写属性 outline 更为方便。

语法

css
/* 关键字值 */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> 值 */
outline-width: 1px;
outline-width: 0.1em;

/* 全局值 */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;

outline-width 属性的值可以是以下列表的任意一项。

<length>

轮廓的宽度指定为 <length>

thin

取决于用户代理。通常等同于桌面浏览器的 1px(包括 Firefox)。

medium

取决于用户代理。通常等同于桌面浏览器的 3px(包括 Firefox)。

thick

取决于用户代理。通常等同于桌面浏览器的 5px(包括 Firefox)。

形式定义

初始值medium
适用元素所有元素
是否是继承属性
计算值绝对长度;如果指定关键词为 none,则计算值为 0
动画类型a length

形式语法

outline-width = 
<line-width>

<line-width> =
<length [0,∞]> |
thin |
medium |
thick

示例

设置元素的轮廓宽度

HTML

html
<span id="thin"></span>
<span id="medium">中等</span>
<span id="thick"></span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

结果

规范

Specification
CSS Basic User Interface Module Level 4
# outline-width

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
outline-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见