1. Web
  2. CSS
  3. Reference
  4. Values
  5. <line-width>

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

<line-width> CSS Typ

Der <line-width> enumerierte Werttyp repräsentiert die Länge oder den Schlüsselwortwert, der die Breite einer Linie oder das Fehlen einer Linie definiert. Die <line-width> Schlüsselwortwerte werden in den folgenden Lang- und Kurzschrift-Eigenschaften verwendet:

Syntax

Werte

Der <line-width> Typ wird entweder mit <length> oder einem Schlüsselwort angegeben:

<length>

Eine nicht-negative <length>.

hairline

Repräsentiert eine "gerade sichtbare" Linie, die kleiner oder gleich 1px ist.

thin

Entspricht 1px.

medium

Entspricht 3px.

thick

Entspricht 5px.

Formale Syntax

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

Beispiele

Definition einer Linienbreite

Dieses Beispiel demonstriert alle <line-width> Schlüsselwortwerte zusammen mit einem <length> Wert.

HTML

Wir fügen fünf Boxen in ein <section> Element ein.

html
<section>
  <div data-width="hairline">hairline</div>
  <div data-width="thin">thin</div>
  <div data-width="medium">medium</div>
  <div data-width="thick">thick</div>
  <div data-width="10px">10px</div>
</section>

CSS

Wir gestalten alle Elemente identisch und setzen dann die border-width basierend auf dem data-width Attribut des Elements.

css
section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

Ergebnis

Spezifikationen

Spezifikation
CSS Backgrounds and Borders Module Level 3
# typedef-line-width

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden