Spaltenregelfarbe - CSS-Tricks

Inhaltsverzeichnis:

Anonim

Die column-rule-colorCSS-Eigenschaft bestimmt die Farbe einer Linie zwischen Spalten in einem mehrspaltigen CSS-Layout.

Die Immobilie kann nicht alleine handeln! Um die Farbe zu sehen, müssen wir die Linie - technisch als „Regel“ bezeichnet - zwischen den Spalten erstellen. Das erfordert die column-rule-styleEigenschaft.

.columns ( column-count: 2 600px; column-rule-style: solid; column-rule-color: #f8a100; )

Oder können wir die Verwendung column-rulezusammenfassende Eigenschaft, die kombiniert column-rule-color, column-rule-styleund column-rule-widthin einer einzigen Erklärung.

column-rule: 3px solid #f8a100;

Syntax

column-rule-colornimmt einen einzelnen Farbwert an. Dies kann eine beliebige gültige CSS-Farbe sein, einschließlich Hex-, RGB-, RGBa-, HSL-, HSLa- und benannter Farben. Es akzeptiert sogar currentColorals Wert.

column-rule-color: #f8a100; column-rule-color: hsl(39,100,49); column-rule-color: rgb(250,162,0); column-rule-color: aliceblue; column-rule-color: currentColor;

Demo

Browser-Unterstützung

IE Kante Feuerfuchs Chrom Safari Oper
10+ 12+ 3.5+ 4+ 3.1+ 11,5+
Android Chrome Android Firefox Android Browser iOS Safari Opera Mini
85+ 79+ Nein 3.2+ Alle
Quelle: caniuse

Spezifikation

CSS Mehrspaltiges Layoutmodul Stufe 1 (Entwurf des Herausgebers)