`<line-style>` CSS Type

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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 kurzschriftlichen Rand und Lücken-Dekorations Eigenschaften verwendet:

Syntax

Werte

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

none: Zeigt keine Linie an. Der verwendete Wert der Linienbreite ist 0, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Randzusammenfall hat der Wert none die niedrigste Priorität. Wenn ein anderer widersprüchlicher Rand gesetzt ist, wird dieser angezeigt. Der Wert none ist ähnlich wie hidden.
hidden: Zeigt keine Linie an. Der verwendete Wert der Linienbreite ist 0, auch wenn ein Breitenwert angegeben ist. Im Fall von Tabellenzellen und Randzusammenfall hat der Wert hidden die höchste Priorität. Wenn ein anderer widersprüchlicher 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 Reihe von runden Punkten an. Der Radius der Punkte entspricht der Hälfte des berechneten Wertes der Linienbreite. Der Abstand der Punkte ist in der Spezifikation nicht definiert und implementationsspezifisch.
dashed: Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Linienstücken an. Die genaue Größe und Länge der Segmente sind in der Spezifikation nicht definiert und implementationsspezifisch.
solid: Zeigt eine einzelne, gerade, feste Linie an.
double: Zeigt zwei gerade Linien mit etwas Abstand zwischen ihnen an. Die Länge der Linien summiert sich zur Pixelgröße, die durch die Linienbreite definiert ist.
groove: Zeigt einen Rand mit einem eingeschnittenen Aussehen an. Dieser Wert ist das Gegenteil von ridge.
ridge: Zeigt einen Rand mit einem hervorstehenden Aussehen an. Dieser Wert ist das Gegenteil von groove.
inset: Zeigt einen Rand an, der das Element eingebettet erscheinen lässt. Dieser Wert ist das Gegenteil von outset. Wenn er auf eine Tabellenzellen-Grenze angewendet wird und border-collapse auf collapsed gesetzt ist, verhält sich dieser Wert wie groove.
outset: Zeigt einen Rand an, der das Element erhaben erscheinen lässt. Dieser Wert ist das Gegenteil von inset. Wenn er auf eine Tabellenzelle mit border-collapse auf collapsed 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 er ähnlich wie <line-style>, unterstützt jedoch nicht hidden und beinhaltet den Wert auto. Wenn auto gesetzt ist, wird der vom Benutzeragent 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 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 CSS-Eigenschaften border-style und column-rule-style.

HTML

Dieses Beispiel verwendet mehrere <div> Elemente, jeweils 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>

<div class="none">
  <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 class="hidden">
  <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 class="dotted">
  <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 class="dashed">
  <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 class="solid">
  <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 class="double">
  <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 class="groove">
  <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 class="ridge">
  <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 class="inset">
  <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 class="outset">
  <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

In dem CSS für dieses Beispiel wird der Rand und die Spaltenregel für alle <p>-Elemente auf eine Breite von 7px und den Stilwert double definiert. Für jeden Absatz wird dann der Wert double überschrieben, indem ein anderer <line-style> Wert für die Eigenschaften border-style und column-rule-style angegeben wird.

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;
}

css

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 Auswahl von Linienstil und Farbe. Bei einigen <line-style> Schlüsselwortwerten kann die Farbe der Linie nicht so sein, wie Sie es erwarten. Um den erforderlichen "3D"-Effekt der groove, ridge, inset und outset Stile beim Anzeigen dieser Werte in Schwarz oder Weiß zu erzeugen, verwenden Benutzeragenten andere Farbberechnungen als jede andere Kombination von Farbe und Linie.

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 das inline deklarierte CSS darzustellen.

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

css

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

JavaScript

Das JavaScript erstellt dynamisch <div> Elemente, jeweils mit einer anderen border-color gesetzt.

// prettier-ignore
const 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 Kontrast zwischen den dunklen und hellen Kanten bei helleren Farben stärker hervortritt.