column-rule-color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2017.
La propriété CSS column-rule-color définit la couleur de la ligne tracée entre les colonnes dans une mise en page multi-colonnes.
Exemple interactif
column-rule-color: red;
column-rule-color: rgb(48 125 222);
column-rule-color: hsl(120 80% 40% / 0.6);
column-rule-color: currentColor;
<section id="default-example">
<p id="example-element">
Londres. Le trimestre de Michaelmas venait de se terminer, et le lord
chancelier siégeait dans la salle de Lincoln's Inn. Un novembre implacable.
Tant de boue dans les rues comme si les eaux venaient tout juste de se
retirer de la surface de la terre, et il ne serait pas étonnant de
rencontrer un Megalosaurus, quarante pieds de long environ, se dandinant
comme un lézard éléphantesque en montant Holborn Hill.
</p>
</section>
#example-element {
columns: 3;
column-rule: solid;
text-align: left;
}
Syntaxe
css
/* Valeurs de type <color> */
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);
/* Valeurs globales */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;
La propriété column-rule-color se définit grâce à une valeur de type <color>.
Valeurs
<color>-
Une valeur de couleur qui indique la couleur du trait entre les colonnes.
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |
Syntaxe formelle
column-rule-color =
<line-color-list> |
<auto-line-color-list>
<line-color-list> =
<line-color-or-repeat>#
<auto-line-color-list> =
<line-color-or-repeat>#? , <auto-repeat-line-color> , <line-color-or-repeat>#?
<line-color-or-repeat> =
<color> |
<repeat-line-color>
<auto-repeat-line-color> =
repeat( auto , [ <color> ]# )
<repeat-line-color> =
repeat( [ <integer [1,∞]> ] , [ <color> ]# )
<integer> =
<number-token>
Exemples
Définir une règle de colonne bleue
HTML
html
<p>
Ce texte est réparti en trois colonnes. La propriété `column-rule-color` est
utilisée pour changer la couleur de la ligne tracée entre les colonnes. Ne
trouvez-vous pas cela merveilleux ?
</p>
CSS
css
p {
column-count: 3;
column-rule-style: solid;
column-rule-color: blue;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # crc |
Compatibilité des navigateurs
Voir aussi
- Le type de donnée
<color> - Les autres propriétés relatives aux couleurs :
color,background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadowetcaret-color