<line-style>

Der enumerierte <line-style>-Typ 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 ist. Bei Zellen- und Rahmenzusammenführung hat der none-Wert die niedrigste Priorität. Wenn ein anderer, widersprüchlicher Rahmen festgelegt ist, wird er 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. Bei Zellen- und Rahmenzusammenführung hat der hidden-Wert die höchste Priorität. Wenn ein anderer, widersprüchlicher Rahmen festgelegt ist, wird er nicht angezeigt. Der hidden-Wert ist ähnlich wie none, aber hidden ist kein gültiger Wert für Umrissstile.

dotted

Zeigt eine Reihe von runden Punkten. Der Radius der Punkte ist die Hälfte des berechneten Wertes der Linienbreite. Der Abstand der Punkte wird nicht durch die Spezifikation definiert und ist implementierungsspezifisch.

dashed

Zeigt eine Reihe von kurzen, quadratisch abgeschlossenen Strichen oder Liniensegmenten. Die genaue Größe und Länge der Segmente sind nicht durch die Spezifikation definiert und sind implementierungsspezifisch.

solid

Zeigt eine einzelne, gerade, durchgehende Linie.

double

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

groove

Zeigt einen Rahmen mit geschnitztem Aussehen. Dieser Wert ist das Gegenteil von ridge.

ridge

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

inset

Zeigt einen Rahmen an, der das Element eingebettet wirken lässt. Dieser Wert ist das Gegenteil von outset. Wenn er auf eine Tabellenzellenumrandung angewendet wird 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 er auf eine Tabellenzelle mit border-collapse gesetzt wird, verhält sich dieser Wert wie ridge.

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

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

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, von denen jedes eine Klasse hat, die den <line-style>-Wert repräsentiert, der demonstriert wird.

<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 für dieses Beispiel ist für alle <p>-Elemente eine Rahmenbreite von 7px und der Stilwert double definiert. Für jeden 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.

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 Rahmen nicht immer schwarz ist.

Dieses Beispiel demonstriert die Wahl von Linienstil und Farbe. Bei einigen <line-style>-Schlüsselwortwerten ist die Farbe der Linie möglicherweise nicht das, was Sie erwarten. Um den erforderlichen "3D"-Effekt der Stile groove, ridge, inset und outset zu erzeugen, verwenden Benutzeragenten bei der Darstellung dieser Werte in Schwarz oder Weiß andere Farbberechnungen als bei allen anderen Farblinienkombinationen.

CSS

Die vier Seiten jedes <div> haben einen unterschiedlichen <line-style>-Wert und jedes Listenelement hat einen anderen <color>-Wert. Wir verwenden generierten Inhalt, um die CSS inline 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, von denen jedes eine andere border-color gesetzt hat.

// 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 vom tatsächlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten bei Verwendung heller Farben deutlicher ist.

• Module für Hintergründe und Rahmen in CSS
• CSS-Benutzeroberflächen-Grundmodul
• CSS-Multispalten-Layout-Modul