outline-style
CSS
property sets the style 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-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /* Global values */ outline-style: inherit; outline-style: initial; outline-style: unset;
outline-style
property is specified as any one of the values listed below.
auto
none
outline-width
is
0
.
dotted
dashed
solid
double
outline-width
is the sum of the two lines and the space between them.
groove
ridge
groove
: the outline looks as though it were extruded from the page.
inset
outset
inset
: the outline makes the box look as though it were coming out of the page.
| 初始值 |
none
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | <'border-style'>
auto
value indicates a custom outline style —
typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow.
<div> <p class="auto">Outline Demo</p> </div>
.auto {
outline-style: auto; /* same result as "outline: auto" */
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
<div>
<div class="dotted">
<p class="dashed">Outline Demo</p>
</div>
</div>
.dotted {
outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
outline-style: dashed;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
<div>
<div class="solid">
<p class="double">Outline Demo</p>
</div>
</div>
.solid {
outline-style: solid;
}
.double {
outline-style: double;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
<div>
<div class="groove">
<p class="ridge">Outline Demo</p>
</div>
</div>
.groove {
outline-style: groove;
}
.ridge {
outline-style: ridge;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
<div>
<div class="inset">
<p class="outset">Outline Demo</p>
</div>
</div>
.inset {
outline-style: inset;
}
.outset {
outline-style: outset;
}
/* To make the Demo clearer */
* { outline-width: 10px; padding: 15px; }
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
outline-style
|
Chrome 完整支持 1 | Edge 完整支持 12 |
Firefox
完整支持
1.5
|
IE 完整支持 8 | Opera 完整支持 7 | Safari 完整支持 1.2 | WebView Android 完整支持 2 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
auto
|
Chrome 完整支持 1 | Edge 完整支持 79 | Firefox 完整支持 1.5 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 1.2 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
要求使用供应商前缀或不同名称。