CSS-Eigenschaft column-rule-color
Die CSS-Eigenschaft column-rule-color legt die Farbe der Trennlinie fest.
Die Eigenschaft column-rule-color ist eine der CSS3-Eigenschaften.
Die Farbe der Trennlinie kann auch über die Kurzschreibweise column-rule festgelegt werden.
Webfarben finden Sie in unserem Abschnitt HTML-Farben und können Ihre bevorzugten Farben mit unserem Farbauswahl-Tool ausprobieren.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Multicol-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Farbe der Trennlinie ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.columnRuleColor = "#666"; |
Syntax
Syntax der CSS-Eigenschaft column-rule-color
css
column-rule-color: color | initial | inherit;Beispiel für die Eigenschaft column-rule-color:
Beispiel der CSS-Eigenschaft column-rule-color mit dem Wert lightgreen
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 20px;
column-rule-style: dashed;
column-rule-color: lightgreen;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>INFO
Für die Eigenschaft column-rule-color können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert festgelegt werden.
Beispiel für die Eigenschaft column-rule-color mit dem Wert „hexadezimal“:
Beispiel der CSS-Eigenschaft column-rule-color mit hexadezimalem Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-color: #8ebf42;
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Ergebnis
Beispiel für die Eigenschaft column-rule-color mit dem Wert „RGB“:
Beispiel der CSS-Eigenschaft column-rule-color mit RGB-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 40px;
column-rule-style: double;
column-rule-color: rgb(234, 211, 21);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Beispiel für die Eigenschaft column-rule-color mit dem Wert „HSL“:
Beispiel der CSS-Eigenschaft column-rule-color mit HSL-Wert
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
column-rule-color: hsl(351, 97%, 57%);
}
</style>
</head>
<body>
<h1>The column-rule-color example</h1>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| color | Legt die Farbe der Trennlinie fest. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was ist der Zweck der CSS-Eigenschaft 'column-rule-color'?