La propiedad de regla de columna en CSS se usa para especificar el ancho, el estilo y el color de las reglas entre las columnas.
Sintaxis:
column-rule: column-rule-width column-rule-style column-rule-color| initial|inherit;
Valores de propiedad:
- column-rule-width: este valor se utiliza para establecer el ancho de la regla entre las columnas. El valor predeterminado de este valor de propiedad es medio .
- column-rule-style: este valor se utiliza para establecer el estilo de la regla entre columnas. El valor predeterminado de este valor de propiedad es none .
- column-rule-color: Este valor se utiliza para establecer el color de la regla entre columnas. El valor predeterminado de este valor de propiedad es el color del elemento.
- initial: este valor se utiliza para establecer el valor predeterminado de esta propiedad de regla de columna .
- heredar: este valor le dice a la propiedad de regla de columna que herede la propiedad de su padre.
Ejemplo :
html
<!DOCTYPE html>
<html>
<head>
<title>The column-rule Property</title>
<style>
.gfg {
-webkit-column-count: 3;
-moz-column-count: 3
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px double #ff00ff;
-moz-column-rule: 4px double #ff00ff;
column-rule: 4px double #ff00ff;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
The column-rule Property
</h2>
<p>
The column-rule property sets the width, style,
and color of the rule between the columns of
the element:
</p>
<div class="gfg">
The course is designed for students
as well as working professionals to prepare
for coding interviews. This course is going
to have coding questions from school level
to the level needed for product based companies
like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de regla de columna se enumeran a continuación;
- Google Chrome: 50.0, 4.0 -webkit-
- Explorador de Internet: 10.0
- Firefox: 52.0, 2.0 -moz-
- Opera: 37.0, 15.0 -webkit-, 11.1
- Safari: 9.0, 3.1 -webkit-