Spaltenregelstil - CSS-Tricks

Inhaltsverzeichnis:

Anonim

Die column-rule-styleCSS-Eigenschaft gibt den Linientyp an, der zwischen Spalten in einem mehrspaltigen CSS-Layout gezogen wird.

Das Anwesen ist für sich genommen begrenzt. Wenn wir es deklarieren, wird eine Linie zwischen CSS-Spalten gezogen, die ein Pixel breit und schwarz ist.

.columns ( columns: 2 600px; column-rule-style: solid; )

Interessanter wird es, wenn wir column-rule-stylemit anderen column-rule-Eigenschaften kombinieren , z. B. 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 column-ruleShorthand-Eigenschaft verwenden, die alle drei in einer einzigen Deklaration kombiniert:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Syntax

column-rule-style: ;
  • Ursprünglicher Wert: none
  • Gilt für: mehrspaltige Container
  • Geerbt: 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 Kante Feuerfuchs Chrom Safari Oper
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
Quelle: caniuse

Spezifikation

CSS Mehrspaltiges Layoutmodul Stufe 1 (Entwurf des Herausgebers)