CSS
outline-width
property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the
border
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
It is often more convenient to use the shorthand property
outline
when defining the appearance of an outline.
/* Keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* Global values */ outline-width: inherit;
outline-width
property is specified as any one of the values listed below.
<length>
<length>
.
thin
1px
in desktop browsers (including Firefox).
medium
3px
in desktop browsers (including Firefox).
thick
5px
in desktop browsers (including Firefox).
| 初始值 |
medium
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 |
an absolute length; if the keyword
none
is specified, the computed value is
0
|
| 动画类型 | a length |
<line-width>
<span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span>
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;
}
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-width
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1.5
|
IE 完整支持 8 | Opera 完整支持 7 | Safari 完整支持 1.2 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
要求使用供应商前缀或不同名称。