CSS column-rule-width
La proprietà CSS column-rule-width (CSS3): definisce lo spessore della linea tra colonne
La proprietà column-rule-width permette di specificare lo spessore della linea divisoria tra colonne in un layout multicolonna. Può essere definita con valori di lunghezza o parole chiave predefinite come thin, medium o thick. Per essere visibile, deve essere usata insieme a column-rule-style diverso da none.
Sintassi
Valori principali accettati:
lunghezza: Valori come
1px,0.2em,2remindicano lo spessore esatto della linea.thin: Linea sottile (circa 1px).
medium: Spessore medio (valore di default, circa 3px).
thick: Linea spessa (circa 5px).
Nota: La linea non sarà visibile se non è specificato uno stile diverso da none con column-rule-style.
Esempio proprietà: column-rule-width
Codice Esempio: column-rule-width
.column-width-example {
column-count: 3;
column-gap: 20px;
column-rule-style: solid;
column-rule-color: #c678dd;
background-color: #fafafa;
padding: 20px;
font-size: 16px;
line-height: 1.5;
border-radius: 10px;
margin-bottom: 30px;
}.width-thin { column-rule-width: thin; }
.width-medium { column-rule-width: medium; }
.width-thick { column-rule-width: thick; }
.width-custom { column-rule-width: 6px; }
Contenuto Esempio: column-rule-width
Esempio di utilizzo di column-rule-width
In questo esempio, ogni blocco mostra una diversa larghezza della linea tra colonne.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CSS e HTML per l'esempio con column-rule-width:
<style>
.column-width-example {
column-count: 3;
column-gap: 20px;
column-rule-style: solid;
column-rule-color: #c678dd;
background-color: #fafafa;
padding: 20px;
font-size: 16px;
line-height: 1.5;
border-radius: 10px;
margin-bottom: 20px;
}
.width-thin { column-rule-width: thin; }
.width-medium { column-rule-width: medium; }
.width-thick { column-rule-width: thick; }
.width-custom { column-rule-width: 6px; }
</style>
<div class="column-width-example width-thin">
<strong>column-rule-width: thin</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="column-width-example width-medium">
<strong>column-rule-width: medium (default)</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="column-width-example width-thick">
<strong>column-rule-width: thick</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="column-width-example width-custom">
<strong>column-rule-width: 6px</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
