CSS column-rule-color
La proprietà CSS column-rule-color (CSS3): definisce il colore della linea tra colonne
La proprietà column-rule-color permette di personalizzare il colore della linea che separa le colonne in un layout multicolonna. È utile per armonizzare lo stile della divisione con il resto del design. Va utilizzata insieme a column-rule-style e column-rule-width per ottenere un effetto visibile.
Sintassi
Significato dei valori principali:
-
color: Qualsiasi valore di colore CSS valido, ad esempio:
#50a14f(esadecimale)rgb(80, 161, 79)hsl(125, 34%, 47%)green(parola chiave)
Nota: Affinché column-rule-color abbia effetto, è necessario specificare anche column-rule-style e column-rule-width.
Esempio proprietà: column-rule-color
Codice Esempio: column-rule-color
.column-rule-color-example {
column-count: 3;
column-gap: 30px;
column-rule-width: 4px;
column-rule-style: solid;
column-rule-color: #e06c75;
background-color: #fefefe;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 30px;
}
Contenuto Esempio: column-rule-color
Esempio di utilizzo di column-rule-color
In questo esempio, la linea tra le colonne ha un colore personalizzato.
CSS e HTML per l'esempio con column-rule-color:
<style>
.column-rule-color-example {
column-count: 3;
column-gap: 30px;
column-rule-width: 4px;
column-rule-style: solid;
column-rule-color: #e06c75;
background-color: #fefefe;
padding: 20px;
font-size: 16px;
line-height: 1.6;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
<div class="column-rule-color-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: 18.97.14.88
