<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> [Aufzählungs]-Wertetyp (/de/docs/Glossary/enumerated) 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]-und (Spalten) Eigenschaften verwendet:

Syntax

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

Werte

Der <line-style> Aufzählungswertetyp wird durch einen der unten aufgeführten Werte angegeben:

none

Zeigt keine Linie an. Der berechnete Wert der Breite der Linie ist 0, selbst wenn ein Breitenwert angegeben ist. Im Falle von Tabellenzellen und dem Zusammenfall von Rändern hat der Wert none die niedrigste Priorität. Wenn ein anderer, widersprüchlicher Rahmen 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 ist. Im Falle von Tabellenzellen und dem Zusammenfallen von Rändern hat der Wert hidden die höchste Priorität. Wenn ein anderer, widersprüchlicher Rahmen 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 beträgt die Hälfte des berechneten Wertes der Breite der Linie. Der Abstand der Punkte ist nicht durch die Spezifikation definiert und implementationsspezifisch.

dashed

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

solid

Zeigt eine einzige, durchgehende, solide Linie an.

double

Zeigt zwei durchgehende Linien mit etwas Abstand zwischen ihnen an. Die Länge der Linien summiert sich auf die durch die Breite der Linie definierte Pixelgröße.

groove

Zeigt einen Rand mit einem eingeschnittenen Aussehen an. Dieser Wert ist das Gegenstück zu ridge.

ridge

Zeigt einen Rand mit einem erhabenen Aussehen an. Dieser Wert ist das Gegenstück zu groove.

inset

Zeigt einen Rand an, der das Element eingebettet erscheinen lässt. Dieser Wert ist das Gegenstück zu outset. Wenn dieser Wert auf eine Tabellenzellen-Grenze angewendet wird und border-collapse auf collapsed gesetzt ist, verhält sich dieser Wert wie groove.

outset

Zeigt eine Umrandung an, die das Element geprägt erscheinen lässt. Dieser Wert ist das Gegenstück zu inset. Wenn er auf eine Tabellenzelle mit border-collapse auf collapsed gesetzt angewendet wird, verhält sich dieser Wert wie ridge.

Hinweis: Wenn <outline-style> als Wertetyp für die outline- und outline-style-Eigenschaften verwendet wird, ist es ähnlich wie <line-style>, unterstützt jedoch nicht hidden und enthält den Wert auto. Wenn auto festgelegt ist, wird der user-agent-definierte <line-style>-Wert verwendet.

Beispiele

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

Festlegen 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, von denen jedes eine Klasse hat, die den demonstrierten <line-style>-Wert darstellt.

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 für dieses Beispiel ist die Umrandung und die Spaltenregel für alle <p>-Elemente mit einer Breite von 7px und dem Stilwert double definiert. 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 die schwarze Umrandung nicht immer schwarz ist.

Festlegen von Linienstilen und Farben

Dieses Beispiel zeigt die Wahl des Linienstils und der Farbe. Bei einigen Schlüsselwortwerten <line-style> entspricht die Linienfarbe möglicherweise nicht den Erwartungen. Um den erforderlichen "3D"-Effekt der groove-, ridge-, inset- und outset-Stile zu erzeugen, verwenden Benutzeragenten beim Anzeigen dieser Werte in Schwarz oder Weiß andere Farb-Berechnungen als jede andere Farblinien-Kombination.

HTML

Dieses Beispiel verwendet mehrere <div>-Elemente, von denen jedes eine andere border-color als Inline- style hat.

html
<div style="border-color: #000000"></div>

CSS

Die vier Seiten jedes <div>-Elements haben einen unterschiedlichen <line-style>-Wert, und jedes Listenelement hat einen anderen <color>-Wert. Wir verwenden generierten Inhalt, um den CSS-Inhalt anzuzeigen, der inline erklärt wird.

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 sich von dem tatsächlichen Schwarz unterscheiden kann und der Kontrast zwischen den dunklen und hellen Kanten bei Verwendung von helleren Farben stärker auffällt.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch