Regola colonna - Trucchi CSS

Sommario

Per rendere le colonne distinte, puoi aggiungere una linea verticale tra ciascuna colonna. La linea si trova al centro dello spazio tra le colonne. Se hai mai disegnato uno stile border, allora sei pronto per lo stile column-rule.

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

La struttura è l'abbreviazione di column-rule-width, column-rule-stylee column-rule-color, che è lo stesso modello bordere accetta gli stessi valori.

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthpuò essere una lunghezza come 3pxo un valore di parola chiave come thin.

column-rule-stylepuò essere uno qualsiasi dei border-stylevalori come solid, dottede dashed.

column-rule-color può essere qualsiasi valore di colore.

A differenza column-gap, column-rulenon occupa spazio. Se column-rule-widthè più spesso di, column-gapla regola si espanderà sotto le colonne.

La regola verticale esisterà solo tra le colonne che hanno contenuto.