Effectue la c sure d'une chaîne
La propriété column-rule de CSS est utilisée pour spécifier la largeur, le style et la couleur des règles entre les colonnes.
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
Valeurs par défaut | medium none color |
---|---|
Inherited: | non |
Animable : | oui voir les propriétés individuelles En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.columnRule="3px outset blue" |
Exemple Copier le code
div { column-rule: 4px double #ff00ff; }
Cet exemple pourait être écrit autrement en separant les tois régles(column-rule-width, column-rule-style et column-rule-color) comme dans ce qui suit.
column-rule-color: color|initial|inherit;
Valeurs par défaut | la couleur du texte de l'élément |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.columnRuleColor="#ff0000" |
Exemple Copier le code
div { column-rule-color: #ff0000; }
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valeurs par défaut | none |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.columnRuleStyle="dotted" |
Exemple Copier le code
div { column-rule-style: dotted; }
column-rule-width: medium|thin|thick|length|initial|inherit;
Valeurs par défaut | medium |
---|---|
Inherited: | non |
Animable : | oui En savoir plus sur l'animable |
Version: | CSS3 |
Syntaxe JavaScript: | object.style.columnRuleWidth="10px" |
Exemple Copier le code
div { column-rule-width: 10px; }
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 50 4 -webkit- | 10 | 52 2 -moz- | 9 3.1 -webkit- | 37 15 -webkit- 11.1 -o- |
Exemple Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Animation de la règle de la colonne</title> <style> #monDIV { border: 1px solid black; column-count: 3; column-rule: 1px outset red; animation: monAnimation 5s infinite; } @keyframes monAnimation { 50% { column-rule: 50px outset #00ffff; } } </style> </head> <body> <h1>Animation de la règle de la colonne : column-rule</h1> <p>Changez progressivement la règle entre les colonnes :<p> <div id="monDIV"> Tristique et egestas quis ipsum. Eget aliquet nibh praesent tristique. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Odio euismod lacinia at quis risus sed vulputate odio ut. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Aliquet eget sit amet tellus cras. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Ultricies integer quis auctor elit sed vulputate mi sit. Adipiscing vitae proin sagittis nisl. Habitant morbi tristique senectus et netus et malesuada fames ac. Arcu felis bibendum ut tristique et. Purus ut faucibus pulvinar elementum. Lacus laoreet non curabitur gravida arcu. Velit euismod in pellentesque massa. Arcu non odio euismod lacinia at quis risus sed vulputate. </div> <p>La propriété column-rule est un raccourci pour toutes les propriétés column-rule.</p> <p>Les propriétés column-rule-color et column-rule-width sont <em>animatable</em> en CSS.</p> </body> </html>