<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 Wertetyp 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 Kurzformen der border und column Eigenschaften verwendet:

Syntax

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

Werte

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

none

Zeigt keine Linie an. Der berechnete Wert der Linienbreite ist 0, selbst wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Rand-Kollaps hat der none Wert die niedrigste Priorität. Wenn ein anderer widersprüchlicher Rahmen gesetzt ist, wird dieser angezeigt. Der none Wert ist ähnlich wie hidden.

hidden

Zeigt keine Linie an. Die berechnete Breite der Linie ist 0, selbst wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Rand-Kollaps hat der hidden Wert die höchste Priorität. Wenn ein anderer widersprüchlicher Rahmen gesetzt ist, wird dieser nicht angezeigt. Der hidden Wert ist ähnlich wie none, aber hidden ist kein gültiger Wert für Umrissstile.

dotted

Zeigt eine Serie von runden Punkten an. Der Radius der Punkte ist die Hälfte des berechneten Wertes der Linienbreite. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und implementation-spezifisch.

dashed

Zeigt eine Serie von kurzen, quadratisch beendeten Strichen oder Linienelementen an. Die genaue Größe und Länge der Elemente ist nicht durch die Spezifikation definiert und implementation-spezifisch.

solid

Zeigt eine einzige, gerade, durchgehende Linie an.

double

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

groove

Zeigt einen Rahmen mit einem geschnitzten Aussehen an. Dieser Wert ist das Gegenteil von ridge.

ridge

Zeigt einen Rahmen mit einem erhabenen Aussehen an. Dieser Wert ist das Gegenteil von groove.

inset

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

outset

Zeigt einen Rahmen an, der das Element erhaben erscheinen lässt. Dieser Wert ist das Gegenteil von inset. Wenn auf eine Tabellenzelle angewendet und 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 es ähnlich wie <line-style>, unterstützt jedoch nicht hidden und enthält den auto Wert. Wenn auto gesetzt ist, wird der vom User-Agent definierte <line-style> Wert verwendet.

Beispiele

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

Linienstile definieren

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

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, von denen jedes eine Klasse repräsentiert, die den <line-style> Wert darstellt, 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 dieses Beispiels wird für alle <p> Elemente die Rand- und Spaltenregelbreite auf 7px und der Stilwert auf double gesetzt. Für jeden Absatz wird der double Wert dann überschrieben, indem ein anderer <line-style> Wert für die border-style und column-rule-style Eigenschaften 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.

Linienstile und Farben definieren

Dieses Beispiel zeigt Linienstil- und Farbwahl. Bei einigen <line-style> Schlüsselwortwerten ist die Farbe der Linie möglicherweise nicht das, was Sie erwarten. Um den erforderlichen „3D“-Effekt von groove, ridge, inset und outset Stilen zu erzeugen, verwenden die User Agents bei der Anzeige dieser Werte in Schwarz oder Weiß andere Farbberechnungen als bei allen anderen Farblinien-Kombinationen.

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, von denen jedes eine andere border-color als inline style gesetzt 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 CSS-Inhalt inline 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 möglicherweise von dem tatsächlichen Schwarz abweicht 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