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 der Kontur eines Elements fest. Eine Kontur ist eine Linie, die um ein Element herum 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 Kurzform-Eigenschaft outline zu verwenden, um das Erscheinungsbild einer Kontur zu definieren.

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;

Die outline-width Eigenschaft wird als einer der unten aufgeführten Werte angegeben.

Werte

<length>: Die Breite der Kontur, angegeben als ein <length>.
thin: Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 1px in Desktop-Browsern (einschließlich Firefox).
medium: Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 3px in Desktop-Browsern (einschließlich Firefox).
thick: Hängt vom Benutzeragenten ab. Typischerweise entspricht dies 5px in 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 Konturdicke 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

Specification
CSS Basic User Interface Module Level 4 # outline-width

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden