Definición de .column-rule en CSS
Para que las columnas sean distintas, puede agregar una línea vertical entre cada columna. La línea se encuentra en el centro de la brecha de columna. Si alguna vez has diseñado el borde, entonces estás listo para estilo .column-rule.
Caso de empleo : propiedad CSS column-rule
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
.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;
}Otro ejemplo más avanzado de .column-rule es el siguiente de CODEPEN:
Sintaxis de .column-rule en CSS
column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| Establece el ancho de la regla entre columnas. El valor predeterminado es medio | ||
| Establece el estilo de la regla entre columnas. El valor predeterminado es ninguno. | ||
| Establece el color de la regla entre columnas. El valor predeterminado es el color del elemento. | ||
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .column-rule
Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-rule-color | 50.0 4.0 -webkit- | 10.0 | 52.0 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit 11.1 |
