La propriété column-rule-width
permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Valeurs avec un mot-clé */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
/* Valeurs de longueurs */
/* Type <length> */
column-rule-width: 1px;
column-rule-width: 2.5em;
/* Valeurs globales */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;
La propriété column-rule-width
est définie grâce à une valeur de type <br-width>
.
Valeurs
<br-width>
- Une valeur de longueur (type
<length>
) ou un mot-clé parmithin
,medium
outhick
qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriétéborder-width
.
Syntaxe formelle
Exemples
CSS
.exemple {
border: 10px solid #000000;
columns:3;
column-rule-width: thick;
column-rule-color: blue;
column-rule-style: dashed;
}
HTML
<p class=exemple>
« 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>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Multi-column Layout Module La définition de 'column-rule-width' dans cette spécification. |
Version de travail | Définition initiale. |
Valeur initiale | medium |
---|---|
Applicabilité | éléments sur plusieurs colonnes |
Héritée | non |
Valeur calculée | une longueur absolue ou 0 si column-rule-style vaut none ou hidden |
Type d'animation | une longueur |
Compatibilité des navigateurs
BCD tables only load in the browser
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.