Para diferenciar las columnas, puede agregar una línea vertical entre cada columna. La línea se encuentra en el centro del espacio de la columna. Si alguna vez ha peinado border, entonces está listo para peinar 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 propiedad es una abreviatura de column-rule-width, column-rule-styley column-rule-color, que es el mismo patrón bordery acepta los mismos valores.
-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-widthpuede ser una longitud como 3pxo un valor de palabra clave como thin.
column-rule-stylepuede ser cualquiera de los border-stylevalores como solid, dotted, y dashed.
column-rule-color puede tener cualquier valor de color.
A diferencia column-gap, column-ruleno ocupa espacio. Si column-rule-widthes más grueso que el column-gap, la regla se expandirá debajo de las columnas.
La regla vertical solo existirá entre columnas que tengan contenido.
Soporte del navegador
Soporte de diseño de varias columnas:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
¡No olvides tus prefijos!