`column-rule` CSS-Eigenschaft

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 CSS Kurznotation setzt die Breite, den Stil und die Farbe der Linien, die zwischen Spalten in Mehrspalten-Layouts, Flex- und Grid-Layouts gezeichnet werden.

Probieren Sie es aus

column-rule: solid;

column-rule: groove 0.8em teal;

column-rule:
  dotted thick teal,
  repeat(3, dashed pink 1px, outset olive 5px);

column-rule:
  dotted thick teal,
  repeat(auto, dashed pink 1px, dashed pink 5px),
  dotted thick teal;

column-rule:
  dashed medium olive,
  repeat(auto, dotted pink 1px),
  inset orange 5px;

<section id="default-example">
  <p id="example-element">
    London. Lady Catnip sitting in Lincoln's Inn Hall. Nice 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 great to meet a Fred, two feet long or so,
    waddling like an iguana up Holborn Hill.
  </p>
</section>

#example-element {
  columns: 7;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurznotation für die folgenden CSS-Eigenschaften:

Syntax

css

/* One value */
column-rule: dashed;
column-rule: inset 8px;
column-rule: solid teal;
column-rule: thick outset rgb(18 122 67);

/* Multiple values */
column-rule: groove, dashed, solid;
column-rule:
  dotted medium teal,
  dashed pink 0.5em,
  outset olive 1px;
column-rule:
  solid #0ff,
  repeat(3, dashed pink 1px, outset olive 5px);
column-rule:
  inset 3px yellow,
  repeat(auto, dashed pink 1px, groove olive 5px);

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

Werte

Diese Eigenschaft wird als kommagetrennte Liste von Werten angegeben. Jeder Wert kann eine der folgenden Werttypen sein:

<gap-rule>

Angegeben als einer, zwei oder drei der unten aufgeführten Werte, in beliebiger Reihenfolge.

<'line-width'>: Eine <line-width>: Dies kann eines der Schlüsselwörter thin, medium oder thick sein oder ein positiver <length>-Wert, der die Breite der Linie darstellt. Der Standardwert ist medium.
<'line-style'>: Ein <line-style>: einer von none, hidden, dotted, dashed, solid, double, groove, ridge, inset oder outset. Der Standardwert ist none. Siehe column-rule-style.
<'color'>: Ein <color>-Wert, der die Farbe der Linie darstellt. Der Standardwert ist currentcolor. Siehe column-rule-color.

<gap-repeat-rule>

Eine repeat()-Funktion, mit einer <integer> von 1 oder mehr als erstem Argument und einem oder mehreren <gap-rule> Werten als nachfolgende Argumente. Die <integer> gibt an, wie oft die Liste der <gap-rule> Werte wiederholt werden soll.

<gap-auto-repeat-rule>

Eine repeat()-Funktion, mit auto als erstem Argument und einem oder mehreren <gap-rule> Werten als nachfolgende Argumente. Die bereitgestellte Liste der <gap-rule> Werte wird so oft wiederholt, wie nötig, um Werte für alle Spaltenregeln zu füllen, die nicht explizit von anderen Komponenten des Eigenschaftswerts angegeben werden.

Beschreibung

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

column-rule ist eine Kurznotation für column-rule-color, column-rule-style, und column-rule-width. Die column-rule, zusammen mit der row-rule-Kurznotation, kann auch mit der rule-Kurznotation gesetzt werden.

Der Eigenschaftswert ist eine kommagetrennte Liste von Komponenten, die <gap-rule>, <gap-repeat-rule> und <gap-auto-repeat-rule> Typen enthalten kann. Jede <gap-rule> definiert die Breite, die Farbe und den Stil von einer oder mehreren Linienelementen.

Wenn der Eigenschaftswert nur aus einer <gap-rule> besteht, werden alle Spaltenregeln diesen Stil haben. Wenn wir folgendes deklarieren, werden alle Spaltenregeln dashed maroon 3px sein:

css

column-rule: dashed maroon 3px;

Wenn mehr als eine <gap-rule> deklariert wird, werden sie in der angegebenen Reihenfolge auf die Spaltenregeln angewendet. Wenn es mehr Zwischenräume zwischen Spalten als <gap-rule> Werte gibt, wird die Liste der Werte wiederholt, bis jede Spaltenregel eine Lücke hat. Wenn wir das Folgende deklarieren, wird zum Beispiel jede ungerade Regel dashed maroon 3px sein und jede gerade Regel dotted navy 5px.

css

column-rule:
  dashed maroon 3px,
  dotted navy 5px;

Wiederholte Linienstile

Die repeat()-Funktion, mit einer Ganzzahl von 1 oder höher als erstem Argument, kann verwendet werden, um eine gültige Liste von CSS <gap-rule>-Werten, die als nachfolgende Argumente übergeben werden, die angegebene Anzahl von Malen zu wiederholen. Dies ermöglicht das wiederholte Anwenden der gleichen <gap-rule> ohne die gleiche CSS mehrmals anzugeben. Die folgenden Deklarationen sind gleichwertig:

css

column-rule:
  solid maroon 5px,
  outset navy 10px,
  inset olive 1px,
  outset navy 10px,
  inset olive 1px,
  outset navy 10px,
  inset olive 1px;
column-rule:
  solid maroon 5px,
  repeat(3, outset navy 10px, inset olive 1px);

Dies erstellt eine Liste von sieben Regeln. Wenn die Anzahl der Stile in der column-rule-Wertstil-Liste die Anzahl der Lücken zwischen den Spalten überschreitet, werden die überzähligen Stilwerte ignoriert. Wenn der Container, auf den dies angewendet wird, drei Spalten hat, wird die Regel im ersten Zwischenraum solid maroon 5px und die zweite outset navy 10px sein.

Wenn es mehr Zwischenräume als Stile gibt, wird die Liste der Stile wiederholt. Wenn der Container 8, 15, 22 oder 29 Spalten hat, wird diese Sequenz von Stilen ein-, zwei-, drei- oder viermal wiederholt, wobei die letzte Regel inset olive 1px sein wird.

Auto-wiederholende Linienstile

Die repeat()-Funktion akzeptiert auch auto als erstes Argument anstelle einer positiven Ganzzahl. Mit auto als erstem Argument werden die <gap-rule>-Werte, die als nachfolgende Argumente übergeben werden, so oft wiederholt, wie nötig, um Werte für alle Regeln zu füllen, die nicht explizit von anderen Komponenten des Eigenschaftswerts angegeben werden.

css

column-rule:
  solid maroon 5px,
  repeat(auto, dotted olive 1px, dashed navy 1px),
  solid maroon 5px;

In diesem Fall werden die ersten und letzten Spaltenregeln solid maroon 5px sein, und alle anderen werden zwischen dotted olive 1px und dashed navy 1px wechseln. Es spielt keine Rolle, ob der Container 3, 6, 11, 16 oder 21 Spalten hat; die ersten und letzten Zwischenräume werden immer eine dicke, solide, kastanienbraune Linie als Trennlinie haben (sofern column-rule-visibility-items nicht dazu führt, dass keine Linie gezeichnet wird), und alle anderen Spaltenregeln werden dünne, gepunktete olivgrüne oder gestrichelte marineblaue Linien sein. Wenn es nur 2 oder 3 Spalten gibt, gibt es keine gepunkteten oder gestrichelten Linien.

Das auto-Schlüsselwort innerhalb der repeat()-Funktion erstellt einen Auto-Wiederholer, der Werte für Spaltenregeln füllt, die sonst keine Werte von anderen Teilen der Liste erhalten würden, um zu verhindern, dass die Liste umkreist wird. Höchstens kann nur ein repeat(auto, <gap-rule>) in einem column-rule-Wert vorhanden sein.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `column-rule-width`: `medium` `column-rule-style`: `none` `column-rule-color`: `currentcolor`
Anwendbar auf	mehrspaltige Elemente
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `column-rule-width`: the absolute `<length>`, snapped as a line width `column-rule-style`: wie angegeben `column-rule-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `column-rule-width`: Längenangabe `column-rule-style`: diskret `column-rule-color`: Farbe

Formale Syntax

column-rule = 
  <gap-rule-list>       |
  <gap-auto-rule-list>  

<gap-rule-list> = 
  <gap-rule-or-repeat>#  

<gap-auto-rule-list> = 
  <gap-rule-or-repeat>#? , <gap-auto-repeat-rule> , <gap-rule-or-repeat>#?  

<gap-rule-or-repeat> = 
  <gap-rule>         |
  <gap-repeat-rule>  

<gap-auto-repeat-rule> = 
  repeat( auto , <gap-rule># )  

<gap-rule> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<gap-repeat-rule> = 
  repeat( <integer [1,∞]> , <gap-rule># )  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

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

<integer> = 
  <number-token>

Beispiele

Einfaches Beispiel

In diesem Beispiel definieren wir eine einzelne Regel für die Linien zwischen Flex-Elementen.

HTML

Wir fügen eine Liste von Autoren ein:

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 und erzeugen Spalten, indem wir die flex-direction auf row setzen, unter Verwendung der flex-flow Kurznotation. Wir fügen eine gap von 12px hinzu, um genügend Platz zwischen den Spalten für unsere 10px groove maroon Regel zu schaffen:

css

ul {
  display: flex;
  flex-flow: row;
  gap: 12px;
  list-style-type: none;

  column-rule: 10px groove maroon;
}

Ergebnis

Wiederholung von Werten

Dieses Beispiel zeigt, wie die Werte wiederholt werden, wenn es weniger Werte in der Liste der Stile gibt als Spaltenregeln. Es zeigt auch die Standardwerte für die Breite, Farbe und den Stil von medium, currentcolor und none.

Mit dem gleichen HTML und CSS wie im vorherigen Beispiel fügen wir vier kommagetrennte <gap-rule> Werte als column-rule-Wert hinzu, wobei die Breite in der ersten <gap-rule>, die Farbe in der zweiten und der Stil in der dritten ausgelassen werden, wobei die vierte alle drei Komponenten enthält:

css

ul {
  column-rule:
    maroon dashed,
    1px dotted,
    5px teal,
    10px orange solid;
}

Die kastanienbraune Linie ist 3px breit. Die gepunktete Linie hat die gleiche Farbe wie der Text. Es gibt keine türkisfarbenen Linien, da das <line-style> der dritten <gap-rule> standardmäßig none ist, sodass keine Linie gezeichnet wird. Es gibt mehr Zwischenräume als <gap-rule> Werte, sodass die Liste der Werte wiederholt wird.

Verwendung der `repeat()`-Funktion

Dieses Beispiel zeigt die Verwendung der repeat()-Funktion innerhalb des column-rule Eigenschaftswerts. Wir verwenden das gleiche HTML und CSS wie in den vorherigen Beispielen. Wir fügen eine repeat()-Funktion hinzu und setzen die Liste von zwei <gap-rule> Werten, um sie viermal zu wiederholen.

css

ul {
  column-rule:
    10px maroon dashed,
    repeat(4, dotted olive 3px, dashed teal 3px),
    10px maroon dashed;
}

Der Flex-Container hat neun Spalten, also acht Zwischenräume. Die repeat()-Funktion wiederholt zwei Stilwerte viermal, wodurch eine Liste von zehn <gap-rule> Werten entsteht. Da es weniger Spaltenzwischenräume als <gap-rule> Werte gibt, werden die letzten beiden Werte in der Liste verworfen.

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

Dieses Beispiel zeigt die Verwendung des auto-Arguments anstelle einer Ganzzahl in der repeat()-Funktion.

Durch die Verwendung von repeat(auto, <gap-rule>) setzen wir alle Spaltenregeln auf 1px gepunktet und standardmäßig die aktuelle Farbe, außer den ersten und letzten, die wir auf 10px groove maroon setzen.

css

ul {
  column-rule:
    10px groove maroon,
    repeat(auto, 3px dotted maroon),
    10px groove maroon;
}

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

Spezifikationen

Spezifikation
CSS Multi-column Layout Module Level 1 # column-rule

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

column-rule CSS-Eigenschaft

HTML

CSS

Ergebnis

Help improve MDN

`column-rule` CSS-Eigenschaft