Der<line-style>aufzählbare 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 Kurzform-border undcolumn Eigenschaften verwendet:

• border,border-style
• border-block,border-block-style
• border-block-end,border-block-end-style
• border-block-start,border-block-start-style
• border-bottom,border-bottom-style
• border-inline,border-inline-style
• border-inline-end,border-inline-end-style
• border-inline-start,border-inline-start-style
• border-left,border-left-style
• border-right,border-right-style
• border-top,border-top-style
• column-rule,column-rule-style

Syntax

Werte

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

none

Zeigt keine Linie an. Der berechnete Wert der Linienbreite ist0, selbst wenn ein Breitenwert angegeben ist. Im Falle von Tabellenzellen und Randüberlagerungen hat der Wertnone dieniedrigste Priorität. Wenn eine andere sich widersprechende Grenze gesetzt ist, wird sie angezeigt. Der Wertnone ist ähnlich wiehidden.

hidden

Zeigt keine Linie an. Die berechnete Breite der Linie ist0, selbst wenn ein Breitenwert angegeben ist. Im Falle von Tabellenzellen und Randüberlagerungen hat der Werthidden diehöchste Priorität. Wenn eine andere sich widersprechende Grenze gesetzt ist, wird sie nicht angezeigt. Der Werthidden ist ähnlich wienone, aberhidden ist kein gültiger Wert für Umrissstile.

dotted

Zeigt eine Reihe von runden Punkten an. Der Radius der Punkte beträgt die Hälfte des berechneten Wertes der Linienbreite. Der Abstand zwischen den Punkten ist nicht durch die Spezifikation definiert und ist Implementierungen überlassen.

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 sind Implementierungen überlassen.

solid

Zeigt eine einzelne, gerade und durchgehende Linie an.

double

Zeigt zwei gerade Linien mit etwas Abstand dazwischen an. Die Länge der Linien ergibt zusammen die Pixelgröße, die durch die Linienbreite definiert ist.

groove

Zeigt einen Rand mit einem eingeschnittenen Aussehen an. Dieser Wert ist das Gegenteil vonridge.

ridge

Zeigt einen Rand mit einem hervorgehobenen Aussehen an. Dieser Wert ist das Gegenteil vongroove.

inset

Zeigt einen Rand an, der das Element eingelassen erscheinen lässt. Dieser Wert ist das Gegenteil vonoutset. Wenn er auf eine Tabellenzellenkante angewendet wird undborder-collapse aufcollapsed gesetzt ist, verhält sich dieser Wert wiegroove.

outset

Zeigt einen Rand an, der das Element hervorgehoben erscheinen lässt. Dieser Wert ist das Gegenteil voninset. Wenn er auf eine Tabellenzelle angewendet wird undborder-collapse aufcollapsed gesetzt ist, verhält sich dieser Wert wieridge.

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 zeigt, wie einige Linienstilfarben auf unerwartete Weise angezeigt werden können.

Linienstile definieren

Dieses Beispiel zeigt alle<line-style> Werte als Werte für die CSSborder-style undcolumn-rule-style Eigenschaften.

HTML

Dieses Beispiel verwendet mehrere<div> Elemente, jedes mit einer Klasse, die den demonstrierten<line-style> Wert repräsentiert.

<div>  <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>

<div>  <p>none</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><div>  <p>hidden</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><div>  <p>dotted</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><div>  <p>dashed</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><div>  <p>solid</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><div>  <p>double</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><div>  <p>groove</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><div>  <p>ridge</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><div>  <p>inset</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><div>  <p>outset</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 Randeinstellung und die Spaltenregel auf eine Breite von7px und den Stilwertdouble festgelegt. Für jeden Absatz wird der Wertdouble dann durch die Angabe eines anderen<line-style> Wertes für dieborder-style undcolumn-rule-style Eigenschaften überschrieben.

div {  display: flex;  gap: 1em;  list-style: none;  align-items: center;}div:first-of-type {  display: none;}p:first-of-type {  text-align: center;  line-height: 5em;}p {  width: 10em;  height: 5em;  background-color: palegoldenrod;}

p {  padding: 5px;  border: double 7px #bada55;}p + p {  columns: 3;  column-gap: 20px;  column-rule: double 7px;  border-color: black;}.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 die Wahl des Linienstils und der Farbe. Bei einigen<line-style> Schlüsselwortwerten ist die Farbe der Linie möglicherweise nicht wie erwartet. Um den erforderlichen "3D"-Effekt dergroove,ridge,inset undoutset Stile zu erzeugen, wenn diese Werte in Schwarz oder Weiß angezeigt werden, verwenden Benutzer-Agenten andere Farb-Berechnungen als bei allen anderen Farben-Linien-Kombinationen.

CSS

Die vier Seiten jedes<div> haben einen unterschiedlichen<line-style> Wert, und jedes Listenelement hat einen anderen<color> Wert. Wir verwendengenerierten Inhalt, um die inline deklarierte CSS anzuzeigen.

body {  display: flex;  flex-wrap: wrap;  gap: 1em;  text-transform: uppercase;  font-family: monospace;}

div {  border-width: 10px;  border-style: inset groove ridge outset;  padding: 5px;}

JavaScript

Das JavaScript erstellt dynamisch<div> Elemente, jedes mit einer unterschiedlichenborder-color Einstellung.

// prettier-ignoreconst colors = [  "#000000", "#000001", "#ffffff",  "#ff00ff", "#ffff00", "#00ffff",  "#cc33cc", "#cccc33", "#33cccc",  "#ff0000", "#00ff00", "#0000ff",  "#cc3333", "#33cc33", "#3333cc",  "#993333", "#339933", "#333399",];for (const c of colors) {  const div = document.createElement("div");  div.style.borderColor = c;  div.textContent = c;  document.body.appendChild(div);}

Ergebnis

Beachten Sie, dass die fast schwarze Farbe#000001 sich von dem tatsächlichen Schwarz unterscheiden kann und der Unterschied zwischen den dunklen und hellen Kanten bei der Verwendung hellerer Farben deutlicher ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Hintergründe und Ränder Modul
• CSS grundlegende Benutzeroberfläche Modul
• CSS Multi-Spalten-Layout Modul