outline-width CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die CSS-Eigenschaft outline-width legt die Dicke der Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element herum außerhalb von border gezeichnet wird.
Beim Definieren des Erscheinungsbilds einer Kontur ist es oft praktischer, die Kurzform-Eigenschaft outline zu verwenden.
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;
}
Syntax
css
/* 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;
Werte
Diese Eigenschaft wird als ein <line-width>-Wert angegeben.
<line-width>-
Definiert die Breite der Kontur, entweder als explizite nicht negative
<length>oder durch die Schlüsselwörterthin,mediumoderthick. Der Standardwert istmedium.
Formale Definition
| Anfangswert | medium |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | the absolute <length>, snapped as a line width |
| Animationstyp | Längenangabe |
Formale Syntax
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
hairline |
thin |
medium |
thick
Beispiele
Festlegen der Konturbreite eines Elements
HTML
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
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
| Spezifikation |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |