<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 ⁨Juli 2015⁩.

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 detaillierten und verkürzten border und column Eigenschaften verwendet:

Syntax

Werte

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

none: Zeigt keine Linie an. Der berechnete Wert der Linienbreite ist 0, selbst wenn ein Breitenwert angegeben wird. Im Fall von Tabellenzellen und Randüberlappung hat der Wert none die niedrigste Priorität. Wenn ein anderer, widersprüchlicher Rand gesetzt ist, wird dieser angezeigt. Der Wert none ähnelt hidden.
hidden: Zeigt keine Linie an. Die berechnete Breite der Linie ist 0, selbst wenn ein Breitenwert angegeben wird. Im Fall von Tabellenzellen und Randüberlappung hat der Wert hidden die höchste Priorität. Wenn ein anderer, widersprüchlicher Rand gesetzt ist, wird dieser nicht angezeigt. Der Wert hidden ähnelt none, aber hidden ist kein gültiger Wert für Umrissstile.
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 wird nicht durch die Spezifikation definiert und ist implementierungsspezifisch.
dashed: Zeigt eine Reihe von kurzen, quadratisch endenden Strichen oder Linienelementen an. Die exakte Größe und Länge der Segmente wird nicht durch die Spezifikation definiert und ist implementierungsspezifisch.
solid: Zeigt eine einzelne, gerade, durchgehende Linie an.
double: Zeigt zwei gerade Linien mit etwas Abstand zwischen ihnen an. Die Länge der Linien summiert sich auf die Pixelgröße, die durch die Linienbreite definiert ist.
groove: Zeigt einen Rand mit einem eingeschnittenen Erscheinungsbild an. Dieser Wert ist das Gegenteil von ridge.
ridge: Zeigt einen Rand mit einem erhabenen Erscheinungsbild 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 einen Tabellenzellenrand 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 angewendet wird mit border-collapse auf collapsed gesetzt, 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 nicht hidden und beinhaltet den Wert auto. Wenn auto gesetzt ist, wird der vom Benutzeragenten definierte <line-style> Wert verwendet.

Formaler 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.

Definieren von Linienstilen

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

Im CSS dieses Beispiels ist der Rand und die Spalte-Regel für alle <p> Elemente auf eine Breite von 7px und den Stilwert double definiert. Für jeden Absatz wird der double Wert durch die Angabe eines anderen <line-style> Wertes für die border-style und column-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;
}

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.

Definieren von Linienstilen und Farben

Dieses Beispiel zeigt die Wahl von Linienstil und Farbe. Mit einigen <line-style> Schlüsselwortwerten kann die Farbe der Linie nicht das sein, was Sie erwarten. Um den erforderlichen "3D"-Effekt der groove, ridge, inset und outset Stile zu erzeugen, verwenden Benutzeragenten unterschiedliche Farbberechnungen als bei allen anderen Farb-Linien-Kombinationen, wenn diese Werte in Schwarz oder Weiß angezeigt werden.

CSS

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

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 einem unterschiedlichen 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 von #000001 sich von tatsächlichem Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Rändern auffälliger ist, wenn hellere Farben verwendet werden.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden