column-rule-style

Die CSS-Eigenschaft column-rule-style legt den Typ der Linie fest, die zwischen Spalten in einem CSS-Mehrspaltenlayout gezeichnet wird.

Die Eigenschaft ist für sich genommen etwas eingeschränkt. Wenn wir sie deklarieren, wird eine ein Pixel breite und schwarze Linie zwischen CSS-Spalten gezeichnet.

.columns {
  columns: 2 600px;
  column-rule-style: solid;
}

Interessanter wird es, wenn wir column-rule-style mit anderen column-rule- Eigenschaften kombinieren, einschließlich column-rule-width (um eine dickere Linie festzulegen) und column-rule-color (um die Farbe zu ändern).

.columns {
  columns: 2 600px;
  column-rule-style: solid;
  column-rule-width: 3px;
  column-rule-color: #f8a100;
}

Oder, hey, wir können einfach die Kurzschreibweiseigenschaft column-rule verwenden, die alle drei in einer einzigen Deklaration kombiniert.

.columns {
  columns: 2 600px;
  column-rule: solid 3px #f8a100;
}

Syntax

column-rule-style: <'border-style'>;

• Initialwert: none
• Gilt für: Multi-Column-Container
• Vererbt: nein
• Berechneter Wert: angegebenes Schlüsselwort
• Animationstyp: diskret

Werte

column-rule-style akzeptiert die folgenden Werte

/* Keyword values */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/* Global values */
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: unset;

Demo

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
10+	12+	3.5+	4+	3.2+	11.5+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
85+	79+	Nein	3.2+	Alle

Verwandte Eigenschaften

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-width
• column-span
• column-width
• columns

Spezifikation

CSS Multi-column Layout Module Level 1 (Editor’s Draft)