<line-style>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der <line-style> enumerierte Werttyp repräsentiert Schlüsselwortwerte, die den Stil einer Linie oder das Fehlen einer Linie definieren. Die <line-style> Schlüsselwortwerte werden in den folgenden Lang- und Kurzform-border und column Eigenschaften verwendet:

Syntax

Werte

Der <line-style> enumerierte Typ wird mit einem der unten aufgeführten Werte angegeben:

none

Zeigt keine Linie an. Der berechnete Wert der Linienbreite ist 0, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Border-Collapsing hat der Wert none die niedrigste Priorität. Wenn ein anderer im Konflikt stehender Rand gesetzt ist, wird er angezeigt. Der Wert none ist ähnlich wie hidden.

hidden

Zeigt keine Linie an. Die berechnete Breite der Linie ist 0, auch wenn ein Breitenwert angegeben ist. Bei Tabellenzellen und Border-Collapsing hat der Wert hidden die höchste Priorität. Wenn ein anderer im Konflikt stehender Rand gesetzt ist, wird dieser nicht angezeigt. Der Wert hidden ist ähnlich wie none, aber hidden ist kein gültiger Wert für Outline-Stile.

dotted

Zeigt eine Aneinanderreihung von runden Punkten. Der Radius der Punkte ist die Hälfte des berechneten Werts der Linienbreite. Der Abstand der Punkte ist nicht von der Spezifikation definiert und implementierungsspezifisch.

dashed

Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Liniensegmenten. Die genaue Größe und Länge der Segmente ist nicht von der Spezifikation definiert und implementierungsspezifisch.

solid

Zeigt eine einzelne, gerade, durchgehende Linie.

double

Zeigt zwei gerade Linien mit etwas Abstand dazwischen. Die Länge der Linien summiert sich auf die durch die Linienbreite definierten Pixelgröße.

groove

Zeigt einen Rand mit einer eingekerbten Erscheinung. Dieser Wert ist das Gegenteil von ridge.

ridge

Zeigt einen Rand mit einer hervorgehobenen Erscheinung. Dieser Wert ist das Gegenteil von groove.

inset

Zeigt einen Rand, der das Element eingebettet erscheinen lässt. Dieser Wert ist das Gegenteil von outset. Wenn er auf eine Tabellenzellenbegrenzung angewendet wird und border-collapse auf collapsed gesetzt ist, verhält sich dieser Wert wie groove.

outset

Zeigt einen Rand, der das Element hervorgehoben erscheinen lässt. Dieser Wert ist das Gegenteil von inset. Wenn er auf eine Tabellenzelle angewendet wird, bei der border-collapse auf collapsed gesetzt ist, verhält sich dieser Wert wie ridge.

Hinweis: Wenn <outline-style> als Wertetyp für die Eigenschaften outline und outline-style verwendet wird, ist er ähnlich wie <line-style>, unterstützt jedoch hidden nicht und enthält den Wert auto. Wenn auto gesetzt ist, wird der durch den Benutzeragenten definierte <line-style> Wert verwendet.

Formale Syntax

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Das erste Beispiel demonstriert alle <line-style> Schlüsselwortwerte. Das zweite Beispiel demonstriert, wie einige Linienstilfarben auf unerwartete Weise angezeigt werden können.

Definieren von Linienstilen

Dieses Beispiel zeigt alle <line-style> Werte als Werte für die CSS-Eigenschaften border-style und column-rule-style.

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, von denen jedes eine Klasse hat, die den dargestellten <line-style> Wert repräsentiert.

html
<div class="{line-style}">
  <p>{line-style}</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

CSS

Im CSS für dieses Beispiel wird für alle <p> Elemente die Breite des Borders und der column-rule auf 7px und der Stilwert auf double festgelegt. Bei jedem Absatz wird der Wert double dann überschrieben, indem ein anderer <line-style> Wert für die Eigenschaften border-style und column-rule-style angegeben wird.

css
p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: #000000;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

Ergebnis

Beachten Sie, dass der schwarze Rand nicht immer schwarz ist.

Definieren von Linienstilen und Farben

Dieses Beispiel zeigt die Wahl von Linienstil und Farbe. Bei einigen <line-style> Schlüsselwortwerten ist die Farbe der Linie möglicherweise nicht wie erwartet. Um den gewünschten "3D"-Effekt der Stile groove, ridge, inset und outset zu erzeugen, verwenden Benutzeragenten bei der Anzeige dieser Werte in Schwarz oder Weiß verschiedene Farbberechnungen als bei allen anderen Farbkombinationen.

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, von denen jedes eine andere border-color als Inline-style hat.

html
<div style="border-color: #000000"></div>

CSS

Die vier Seiten jedes <div> haben einen anderen <line-style> Wert, und jedes Listenelement hat einen anderen <color> Wert. Wir verwenden generierten Inhalt, um den inline deklarierten CSS anzuzeigen.

css
div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}
div::before {
  content: attr(style);
}

Ergebnis

Beachten Sie, dass die fast schwarze Farbe von #000001 sich von dem tatsächlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten deutlicher ist, wenn hellere Farben verwendet werden.

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# typedef-line-style

Browser-Kompatibilität

Siehe auch