<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> aufgezählte 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

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

Werte

Der <line-style> aufgezählte Typ wird mithilfe eines der unten aufgelisteten 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 Grenzüberlappungen hat der none Wert die niedrigste Priorität. Wenn eine andere widersprüchliche Grenze gesetzt ist, wird sie angezeigt. Der none Wert ist ähnlich wie hidden.

hidden

Zeigt keine Linie an. Die berechnete Breite der Linie ist 0, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Grenzüberlappungen hat der hidden Wert die höchste Priorität. Wenn eine andere widersprüchliche Grenze gesetzt ist, wird sie nicht angezeigt. Der hidden Wert ist ähnlich wie none, aber hidden ist kein gültiger Wert für Konturstile.

dotted

Zeigt eine Reihe von runden Punkten an. Der Radius der Punkte ist die Hälfte des berechneten Werts der Linienbreite. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und hängt von der Implementierung ab.

dashed

Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Liniensegmenten an. Die genaue Größe und Länge der Segmente sind nicht durch die Spezifikation definiert und hängen von der Implementierung ab.

solid

Zeigt eine einzelne, gerade, durchgezogene Linie an.

double

Zeigt zwei gerade Linien mit einem Abstand dazwischen an. Die Länge der Linien addiert sich zur Pixelgröße, die durch die Linienbreite definiert ist.

groove

Zeigt eine Grenze mit geschnitztem Aussehen an. Dieser Wert ist das Gegenteil von ridge.

ridge

Zeigt eine Grenze mit hervorgehobenem Aussehen an. Dieser Wert ist das Gegenteil von groove.

inset

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

outset

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

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

Beispiele

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

Definition 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, jedes mit einer Klasse, die den <line-style> Wert repräsentiert, der demonstriert wird.

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 die Grenze und die Spaltenregel für alle <p> Elemente definiert, eine Breite von 7px und den Stilwert double zu haben. Bei jedem Absatz wird der double Wert 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 die schwarze Grenze nicht immer schwarz ist.

Definition von Linienstilen und Farben

Dieses Beispiel demonstriert die Auswahl von Linienstil und Farbe. Bei einigen <line-style> Schlüsselwerten entspricht die Farbe der Linie möglicherweise nicht Ihren Erwartungen. Um den erforderlichen "3D"-Effekt der groove, ridge, inset und outset Stile zu erzeugen, verwenden Benutzeragenten bei der Anzeige dieser Werte in Schwarz oder Weiß andere Farbberechnungen als bei allen anderen Farblinien-Kombinationen.

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, jedes mit einer anderen border-color als inline style gesetzt.

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

CSS

Die vier Seiten jedes <div> haben einen anderen <line-style> Wert, und jedes Listenelement hat einen unterschiedlichen <color> Wert. Wir verwenden generierten Inhalt, um den in CSS deklarierten Inline-Stil 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 eigentlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten bei Verwendung heller Farben auffälliger ist.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch