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
更为方便。
语法
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
属性的值可以是以下列表的任意一项。
值
形式定义
形式语法
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.