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 Juli 2015.
Die CSS outline-width-Eigenschaft legt die Dicke des Umrisses eines Elements fest. Ein Umriss ist eine Linie, die um ein Element gezeichnet wird, außerhalb des border.
Probieren Sie es aus
outline-width: 12px;
outline-width: thin;
outline-width: medium;
outline-width: thick;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Es ist oft praktischer, die Kurzschreibweise der Eigenschaft outline zu verwenden, wenn das Erscheinungsbild eines Umrisses definiert wird.
Syntax
/* 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: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
Die outline-width-Eigenschaft wird als einer der unten aufgeführten Werte angegeben.
Werte
<length>-
Die Breite des Umrisses, angegeben als
<length>. thin-
Hängt vom Benutzeragenten ab. Typischerweise entspricht dies
1pxin Desktop-Browsern (einschließlich Firefox). medium-
Hängt vom Benutzeragenten ab. Typischerweise entspricht dies
3pxin Desktop-Browsern (einschließlich Firefox). thick-
Hängt vom Benutzeragenten ab. Typischerweise entspricht dies
5pxin Desktop-Browsern (einschließlich Firefox).
Formale Definition
| Anfangswert | medium |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | eine absolute Länge; falls das Schlüsselwort none angegeben wurde, ist der berechnete Wert 0 |
| Animationstyp | Längenangabe |
Formale Syntax
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Beispiele
Festlegen der Umrissbreite eines Elements
HTML
<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>
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;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |
Browser-Kompatibilität
Loading…