CSS column-rule
La proprietà CSS column-rule (CSS3): disegna una linea tra le colonne
La proprietà column-rule permette di inserire una linea di separazione tra le colonne di un elemento multicolonna. Funziona come una scorciatoia per column-rule-width, column-rule-style e column-rule-color, rendendo più semplice e rapida la definizione dello stile visivo tra le colonne.
Sintassi
Significato dei valori principali:
-
larghezza: Spessore della linea. Esempi:
1px,0.2em. -
stile: Tipo di linea:
solid,dashed,dotted, ecc. -
colore: Colore della linea. Può essere un valore esadecimale, RGB, HSL o un nome colore.
Nota: È possibile definire anche solo uno o due dei valori; quelli mancanti adotteranno i valori di default.
Esempio proprietà: column-rule
Codice Esempio: column-rule
.column-rule-example {
column-count: 3;
column-gap: 25px;
column-rule: 3px dotted #50a14f;
background-color: #fefefe;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 30px;
}
Contenuto Esempio: column-rule
Esempio di utilizzo di column-rule
Qui vediamo come applicare una linea divisoria tra colonne.
CSS e HTML per l'esempio con column-rule:
<style>
.column-rule-example {
column-count: 3;
column-gap: 25px;
column-rule: 3px dotted #50a14f;
background-color: #fefefe;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
<div class="column-rule-example">
Lorem ipsum dolor sit amet...
</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
