`column-rule-style` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2017 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die column-rule-style CSS-Eigenschaft definiert den Linienstil der Linien, die zwischen den Spalten in Mehrspalten-, Flexbox- und Grid-Layouts gezogen werden.

Probieren Sie es aus

column-rule-style: dotted;

column-rule-style: dashed, dotted;

column-rule-style: repeat(2, inset, outset), double;

column-rule-style: double, repeat(auto, dashed, solid), double;

column-rule-style: hidden;

<section id="default-example">
  <p id="example-element">
    London. Noel term lately over, and the Lord George sitting in Lincoln's Inn
    Hall. Great May weather. As much mud in the streets as if the waters had but
    newly retired from the face of the earth, and it would not be weird to meet
    an platypus, two feet long or so, waddling like an lizard up Morgan Hill.
  </p>
</section>

#example-element {
  columns: 6;
  column-rule-width: thick;
  column-rule-color: teal;
  gap: 7px;
}

Syntax

css

/* One value */
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;

/* Multiple values */
column-rule-style: groove, double, dashed;
column-rule-style: solid, repeat(5, ridge), solid;
column-rule-style: dotted, repeat(auto, inset, outset), dotted;

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

Werte

Die column-rule-style-Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Werten, einschließlich:

<line-style>: Ein <line-style>: einer von none, hidden, dotted, dashed, solid, double, groove, ridge, inset oder outset. Der Standardwert ist none.
<repeat-line-style>: Eine repeat()-Funktion, bei der das erste Argument ein <integer> von 1 oder mehr ist und die nachfolgenden Argumente <line-style>-Werte sind. Die Ganzzahl gibt an, wie oft die <line-style>-Werte wiederholt werden sollen.
<auto-repeat-line-style>: Eine repeat()-Funktion mit auto als erstem Argument und einem oder mehreren <line-style>-Werten als nachfolgende Argumente. Die angegebenen <line-style>-Werte werden so oft wiederholt, wie nötig, um Werte für alle Spaltenregeln zu füllen, die nicht explizit durch andere Komponenten des Eigenschaftswerts festgelegt sind.

Die column-rule-style-Eigenschaft definiert den Linienstil von jeglichen Spaltenregel-Linien, die in den Lücken zwischen den Spalten in Mehrspalten-, Flexbox- und Grid- Containern mit mehr als einer Spalte gezeichnet werden.

Der Wert ist eine durch Kommas getrennte Liste von Komponenten, die <line-style>, <repeat-line-style> und <auto-repeat-line-style>-Typen enthalten kann.

Die column-rule-style-Eigenschaft, zusammen mit den Eigenschaften column-rule-color und column-rule-width, kann mit dem Kurzschreibwert column-rule gesetzt werden. Die column-rule-style kann zusammen mit der Eigenschaft row-rule-style auch mit dem Kurzschreibwert rule-style gesetzt werden.

Hat der Eigenschaftswert nur einen <line-style>, werden alle Spaltenregeln diesen Stil haben. Wenn wir folgendes deklarieren, werden alle Spaltenregeln double:

css

column-rule-style: double;

Wenn mehr als ein <line-style> deklariert ist, werden sie in der angegebenen Reihenfolge auf die Spaltenregeln angewendet. Gibt es mehr Spaltenregeln als <line-style>-Werte, wird die Liste der Linienstile wiederholt, bis jede Spalte einen Stil hat. Wenn wir folgendes deklarieren, wird jede ungerade Regel double und jede gerade Regel groove.

css

column-rule-style: double, groove;

Wiederholte Linienstile

Die repeat()-Funktion, bei der eine Ganzzahl von 1 oder größer als erstes Argument verwendet wird, kann verwendet werden, um eine gültige Liste von CSS-<line-style>-Werten, die als nachfolgende Argumente übergeben werden, die angegebene Anzahl von Malen zu wiederholen. Dies ermöglicht das Wiederholen desselben Stils eine festgelegte Anzahl von Malen, ohne denselben Wert zu wiederholen. Sie können <line-style>-Schlüsselwortwerte oder benutzerdefinierte Eigenschaften einschließen, die auf einen gültigen <line-style> aufgelöst werden. Die Verwendung von repeat() kann es erleichtern, Werte zu schreiben, da wiederkehrende Muster mit einer einzigen Funktion geschrieben werden können, unabhängig von der Anzahl der Spalten. Die folgenden Deklarationen sind äquivalent:

css

column-rule-style: solid, outset, inset, outset, inset;
column-rule-style: solid, repeat(2, outset, inset);

Dies erstellt eine Liste von fünf Stilen. Wenn die Anzahl der Stile in der Stilliste des column-rule-style-Werts die Anzahl der Spaltenlücken übersteigt, werden die überflüssigen Stilwerte ignoriert. Wenn der Container drei Spalten hat, wird die Regel in der ersten Lücke solid und die zweite outset.

Gibt es mehr Lücken als Stile, wird die Stilenliste wiederholt. Wenn der Container 6, 11, 16 oder 21 Spalten hat, wird diese Sequenz von Stilen ein-, zwei-, drei- oder viermal wiederholt, wobei die letzte Regel inset ist.

Automatisch wiederholte Linienstile

Die repeat()-Funktion akzeptiert auch auto als erstes Argument anstelle einer positiven Ganzzahl. Mit auto als erstes Argument werden die <line-style>-Werte, die als nachfolgende Parameter übergeben werden, so oft wiederholt, wie nötig, um die Werte für alle Spaltenregeln zu füllen, die nicht explizit durch andere Komponenten des Eigenschaftswerts festgelegt sind.

css

column-rule-style: solid, repeat(auto, dotted), solid;

In diesem Fall spielt es keine Rolle, ob der Container 3, 6, 11, 16 oder 21 Spalten hat; die erste und letzte Spaltenregel wird immer solid sein, und alle anderen Spaltenregeln werden dotted sein. Gibt es nur 2 oder 3 Spalten, gibt es keine gepunkteten Spaltenregeln.

Das auto-Schlüsselwort innerhalb der repeat()-Funktion erstellt einen automatischen Wiederholer, der Werte für Spaltenregeln auffüllt, die sonst keine Werte von anderen Teilen der Liste erhalten würden, und verhindert, dass die Liste durchlaufen wird. Es ist nur ein repeat(auto, <line-style>) innerhalb eines column-rule-style-Werts erlaubt.

Formale Definition

Anfangswert	`none`
Anwendbar auf	mehrspaltige Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

column-rule-style = 
  <line-style-list>       |
  <auto-line-style-list>  

<line-style-list> = 
  <line-style-or-repeat>#  

<auto-line-style-list> = 
  <line-style-or-repeat>#? , <auto-repeat-line-style> , <line-style-or-repeat>#?  

<line-style-or-repeat> = 
  <line-style>         |
  <repeat-line-style>  

<auto-repeat-line-style> = 
  repeat( auto , [ <line-style> ]# )  

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

<repeat-line-style> = 
  repeat( [ <integer [1,∞]> ] , [ <line-style> ]# )  

<integer> = 
  <number-token>

Beispiele

Grundlegende Verwendung

HTML

html

<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

css

p {
  column-count: 3;
  column-rule-style: dashed;
}

Ergebnis

Mehrere Werte

HTML

Wir fügen eine Liste von Autoren hinzu:

html

<ul>
  <li>Kimberlé Crenshaw</li>
  <li>Angela Y. Davis</li>
  <li>Bernardine Evaristo</li>
  <li>Audre Lorde</li>
  <li>Cathy Park Hong</li>
  <li>Zoya Patel</li>
  <li>Juno Mac</li>
  <li>Molly Smith</li>
  <li>Tara Westover</li>
</ul>

CSS

Wir definieren die Liste als Flex-Container, indem wir Spalten erstellen, indem wir die flex-direction auf row mit der Kurzschreibweise flex-flow setzen. Wir fügen eine gap von 5px hinzu, um genügend Platz zwischen den Spalten zu schaffen, um unsere 3px doppelte Teal-Regel zu integrieren:

css

ul {
  display: flex;
  flex-flow: row;
  gap: 5px;
  column-rule-width: 3px;
  column-rule-color: teal;

  column-rule-style:
    dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden;
}

Ergebnis

Da es mehr Werte (10) als Lücken (8) gibt, werden die none und hidden Werte nicht verwendet.

Wiederholende Werte

Dieses Beispiel zeigt, wie bei weniger Werten in der Stilenliste als Spaltenregeln die Werte wiederholt werden.

Mit demselben HTML und CSS wie im vorherigen Beispiel fügen wir drei durch Kommas getrennte Stile als column-rule-style-Wert hinzu:

css

ul {
  column-rule-style: solid, groove, double;
}

Verwendung der `repeat()`-Funktion

Dieses Beispiel zeigt die Verwendung der repeat()-Funktion innerhalb des column-rule-style-Eigenschaftswerts. Wir verwenden dasselbe HTML und CSS wie in den vorherigen Beispielen. Wir fügen eine repeat()-Funktion hinzu und legen fest, dass die Liste von zwei <line-style>-Werten dreimal wiederholt werden soll.

css

ul {
  column-rule-style: solid, repeat(3, inset, outset), solid;
}

Der Flex-Container hat sechs Spalten, also fünf Lücken. Die repeat()-Funktion wiederholt zwei Stilwerte dreimal und erstellt eine Liste von acht Stilwerten, daher werden die letzten drei Werte in der Liste verworfen.

Verwendung von `auto` innerhalb von `repeat()`

Dieses Beispiel zeigt die Verwendung von auto anstelle einer Ganzzahl innerhalb der repeat()-Funktion.

Indem wir repeat(auto, <line-style>) verwenden, setzen wir alle Spaltenregeln auf groove, außer der ersten und der letzten, die wir auf solid setzen.

css

ul {
  column-rule-style: solid, repeat(auto, groove), solid;
}

@layer no-support {
  @supports not (column-rule-style: solid, groove) {
    body::before {
      content: "Your browser doesn't support multiple values for the column-rule-style property";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}