CSS column-rule-style
La proprietà CSS column-rule-style (CSS3): definisce lo stile della linea tra colonne
La proprietà column-rule-style specifica l'aspetto grafico della linea che separa le colonne. Può essere continua, tratteggiata, punteggiata e altro. Deve essere combinata con column-rule-width e column-rule-color per un risultato completo nel layout multicolonna.
Sintassi
Valori principali accettati:
none: Nessuna linea tra colonne.
solid: Linea continua.
dashed: Linea tratteggiata.
dotted: Linea punteggiata.
double: Due linee parallele.
groove, ridge, inset, outset: Effetti 3D (spesso dipendono dal colore).
Nota: Senza specificare column-rule-width, la linea potrebbe non essere visibile.
Esempio proprietà: column-rule-style
Codice Esempio: column-rule-style
.column-style-example {
column-count: 3;
column-gap: 25px;
column-rule-width: 4px;
column-rule-color: #61afef;
background-color: #fdfdfd;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 30px;
}.style-solid { column-rule-style: solid; }
.style-dashed { column-rule-style: dashed; }
.style-dotted { column-rule-style: dotted; }
.style-double { column-rule-style: double; }
Contenuto Esempio: column-rule-style
Esempio di utilizzo di column-rule-style
In questo esempio, ogni blocco mostra un diverso stile di linea tra colonne.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
CSS e HTML per l'esempio con column-rule-style:
<style>
.column-style-example {
column-count: 3;
column-gap: 25px;
column-rule-width: 4px;
column-rule-color: #61afef;
background-color: #fdfdfd;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 20px;
}
.style-solid { column-rule-style: solid; }
.style-dashed { column-rule-style: dashed; }
.style-dotted { column-rule-style: dotted; }
.style-double { column-rule-style: double; }
</style>
<div class="column-style-example style-solid">
<strong>column-rule-style: solid</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
</div>
<div class="column-style-example style-dashed">
<strong>column-rule-style: dashed</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
</div>
<div class="column-style-example style-dotted">
<strong>column-rule-style: dotted</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
</div>
<div class="column-style-example style-double">
<strong>column-rule-style: double</strong><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
</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.192
