CSS-Eigenschaft column-rule-color

Die Eigenschaft column-rule-color definiert die Farbe der Regel.

Die Farbe der Regel kann auch durch die Shorthand-Eigenschaft column-rule angegeben werden.

Die Webfarben finden Sie in der Abteilung HTML-Farben. Versuchen Sie, Ihre bevorzugten Farben mit unserem Farbwähler auszuwählen.

Anfangswert currentColor
Gilt für Multicol-Element
Geerbt Nein
Animierbar Ja, die Farbe der Regel ist animierbar.
Version CSS3
DOM Syntax object.style.columnRuleColor = "#666";

Syntax

column-rule-color: 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: 20px;  
      -webkit-column-rule-style: dashed;
      -webkit-column-rule-color: lightgreen;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 20px;  
      -moz-column-rule-style: dashed;
      -moz-column-rule-color: lightgreen;
      column-count: 3;
      column-gap: 20px;
      column-rule-style: dashed;
      column-rule-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <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 hexadezimale, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die Eigenschaft column-rule-color einstellen.

Hier ist ein Beispiel, wo ein hexadezimaler Wert für die Eigenschaft column-rule-color eingestellt ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: solid;
      -webkit-column-rule-color: #8ebf42;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: #8ebf42;
      column-count: 3;
      column-gap: 40px;
      column-rule-style: solid;
      column-rule-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <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>

Ein Beispiel für die Eigenschaft column-rule-color mit einem RGB-Wert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 40px;  
      -webkit-column-rule-style: double;
      -webkit-column-rule-color: rgb(234, 211, 21);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 40px;  
      -moz-column-rule-style: double;
      -moz-column-rule-color: rgb(234, 211, 21);
      column-count: 3;
      column-gap: 40px;
      column-rule-style: double;
      column-rule-color: rgb(234, 211, 21);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <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>

Ein weiteres Beispiel für die Eigenschaft column-rule-color mit einem HSL-Wert:

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-style: solid;
      -webkit-column-rule-color: hsl(351, 97%, 57%);
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;  
      -moz-column-rule-style: solid;
      -moz-column-rule-color: hsl(351, 97%, 57%);
      column-count: 3;
      column-gap: 30px;
      column-rule-style: solid;
      column-rule-color: hsl(351, 97%, 57%);
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-color</h2>
    <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
color Der Wert definiert die Farbe der Regel. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
initial Es stellt die Eigenschaft auf seinen Standardwert ein.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

50.0
-webkit-
12.0
-webkit-
52.0
+ 3.5 -moz-
3.0
-webkit-
11.1
+ 15.0 -webkit-


Finden Sie das nützlich?

Ähnliche Artikel