CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

column-rule-color: color;

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

CODE: CSSpreleva codice
  1. .column-rule-color-example {
  2.   column-count: 3;
  3.   column-gap: 30px;
  4.   column-rule-width: 4px;
  5.   column-rule-style: solid;
  6.   column-rule-color: #e06c75;
  7.   background-color: #fefefe;
  8.   padding: 20px;
  9.   font-size: 16px;
  10.   line-height: 1.6;
  11.   border-radius: 10px;
  12.   margin-bottom: 30px;
  13. }

Contenuto Esempio: column-rule-color

Esempio di utilizzo di column-rule-color

In questo esempio, la linea tra le colonne ha un colore personalizzato.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec enim nec urna bibendum aliquam. Proin at turpis sed magna suscipit ultricies. Donec tempor quam at neque porta, ac fermentum turpis bibendum. Suspendisse potenti.

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies