CSS-Eigenschaft column-rule

Die Shorthand-Eigenschaft column-rule definiert den Stil, die Breite und die Farbe der Regel zwischen den Spalten. Sie wird durch die Eigenschaften column-rule-style, column-rule-width und column-rule-color angegeben.

Es wurden einige Eigenschaftserweiterungen hinzugefügt: -webkit- für Safari, Google Chrome und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera usw.
Anfangswert medium none currentColor
Filt für medium none currentColor
Geerbt Nein
Animierbar Ja, die Farbe und die Breite von column-rule sind animierbar.
Version CSS3
DOM Syntax object.style.columnRule = "5px outset #ccc";

Syntax

column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 5px dotted #ccc;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: 5px dotted #ccc;
      column-count: 3;
      column-gap: 30px;
      column-rule: 5px dotted #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule auf 5px dotted gray eingestellt.</p>
    <div>
      Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Sie können nur einen Wert definieren und er wird trotzdem funktionieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit- column-rule: dashed;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule: dashed;
      column-count: 3;
      column-gap: 30px;
      column-rule: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule nur mit "dashed" definiert.</p>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

In diesem Beispiel beträgt die Breite der Regel 10px, der Stil ist durch "groove" definiert und die Farbe ist grau.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 4;
      -webkit-column-gap: 30px;
      -webkit- column-rule: 10px groove #ccc;
      /* Firefox */
      -moz-column-count: 4;
      -moz-column-gap: 30px;
      -moz-column-rule: 10px groove #ccc;
      column-count: 4;
      column-gap: 30px;
      column-rule: 10px groove #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</h2>
    <p>Hier ist column-rule auf 10px groove gray eingestellt.</p>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
    </div>
  </body>
</html>

Werte

Wert Beschreibung
column-rule-width Der Wert definiert die Breite zwischen den Spalten. Der Standardwert ist "medium".
column-rule-style Der Wert definiert den Stil der Regel zwischen den Spalten. Der Standardwert ist "none".
column-rule-color Der Wert definiert die Farbe der Regel. Der Standardwert ist die aktuelle Farbe des Elements.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
50.0
-webkit-
12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-

Übe dein Wissen

Was ist die column-rule Eigenschaft in CSS?
Finden Sie das nützlich?