column-rule-color
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
La propriété column-rule-color
permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.
Exemple interactif
Syntaxe
css
/* Valeurs de couleur */
/* Type <color> */
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);
/* Valeurs globales */
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
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 =
<color>
Exemples
HTML
html
<p>
« Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
le suis maintenant ? D'un côté cela aura ses avantages, ne jamais être une
vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
n'aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
« Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
pour vous, et il n'y en a pas du tout pour vos livres de leçons. »
</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
BCD tables only load in the browser
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-shadow
etcaret-color
- Appliquer des couleurs sur des éléments HTML grâce à CSS