CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

column-rule-style: stile;

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

CODE: CSSpreleva codice
  1. .column-style-example {
  2.   column-count: 3;
  3.   column-gap: 25px;
  4.   column-rule-width: 4px;
  5.   column-rule-color: #61afef;
  6.   background-color: #fdfdfd;
  7.   padding: 20px;
  8.   font-size: 16px;
  9.   line-height: 1.6;
  10.   border-radius: 10px;
  11.   margin-bottom: 30px;
  12. }
  13.  
  14. .style-solid  { column-rule-style: solid; }
  15. .style-dashed { column-rule-style: dashed; }
  16. .style-dotted { column-rule-style: dotted; }
  17. .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.


column-rule-style: solid
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
column-rule-style: dashed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
column-rule-style: dotted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac malesuada nulla.
column-rule-style: double
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

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