CSS-Eigenschaft column-rule-style

Die Eigenschaft column-rule-style definiert den Stil der Regel zwischen den Spalten. Column-rule ähnelt einem Rahmen, den Sie hinzufügen können, um benachbarte Spalten zu trennen. Es kann auch Stile wie einen Rahmen haben.

Man muss die Eigenschaften columns oder column-count definieren, da es Spalten geben sollen, um den Stil dafür einzustellen.

Die Eigenschaft column-rule-style hat folgende Werte:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
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 none
Gilt für Multicol-elemente
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.columnRuleStyle = "dashed" ;

Syntax

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | 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-style: dotted;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: dotted;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für column-rule-style</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 mit dem Wert "double". In diesem Beispiel wird auch für die Regel mit der Eigenschaft column-rule-color eine Farbe angegeben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>TDer Titel des Dokuments</title>
    <style> 
      div {
      /* Chrome, Safari, Opera */
      -webkit-column-count: 3;
      -webkit-column-gap: 30px;
      -webkit-column-rule-style: double;
      -webkit-column-rule-width: 5px;
      -webkit-column-rule-color: #1c87c9;
      /* Firefox */
      -moz-column-count: 3;
      -moz-column-gap: 30px;
      -moz-column-rule-style: double;
      -moz-column-rule-width: 5px;
      -moz-column-rule-color: #1c87c9;
      column-count: 3;
      column-gap: 30px;
      column-rule-style: double;
      column-rule-color: #1c87c9;
      column-rule-width: 5px;
      text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>Ein Beispiel für column-rule-style</h1>
    <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
none Es ist keine Regel definiert. Das ist der Standardwert.
hidden Die Regel ist versteckt.
dotted Die Regel ist gepunktet.
dashed Die Regel ist gestrichelt.
solid ie Regel ist solide.
double Die Regel ist doppelt.
groove Die Regel ist 3D groove. Die Breite und Farbwerte definieren den Effekt.
ridge Die Regel ist 3D ridge. Die Breite und Farbwerte definieren den Effekt.
inset Die Regel ist 3D inset. Die Breite und Farbwerte definieren den Effekt.
outset Die Regel ist 3D outset. Die Breite und Farbwerte definieren den Effekt.
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 Eigenschaft 'column-rule-style' in CSS?
Finden Sie das nützlich?