La propiedad de estilo de regla de columna en CSS se usa para establecer el estilo de la regla de columna entre las columnas en un diseño de varias columnas.
Sintaxis:
column-rule-style: none|double|groove|ridge|inset|hidden|dotted| dashed|solid|outset|initial|inherit
Valores de propiedad: la propiedad de estilo de regla de columna contiene muchos valores que se enumeran a continuación:
- ninguno: Es el valor predeterminado y se utiliza para especificar ninguna regla entre las columnas.
- oculto: Define la regla oculta entre las columnas.
- dotted: Define la regla de puntos entre las columnas.
- discontinua: Define la regla discontinua entre las columnas.
- sólido: Define la regla sólida entre las columnas.
- double: Define la regla de dobles entre las columnas.
- groove: Define una regla ranurada 3D. El efecto depende de los valores de ancho y color.
- ridge: Define una regla 3D ridged. El efecto depende de los valores de ancho y color.
- recuadro: Define una regla de recuadro 3D. El efecto depende de los valores de ancho y color.
- salida: Define una regla de salida 3D. El efecto depende de los valores de ancho y color.
- initial: Establece el valor a su valor por defecto.
- heredar: La propiedad heredada de su elemento padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: dashed;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: dashed;
column-count: 3;
column-gap: 35px;
column-rule-style: dashed;
}
</style>
</head>
<body>
<h1 style = "text-align:center;color:green;">
GeeksforGeeks
</h1>
<div class = "geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: double;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: double;
column-count: 3;
column-gap: 35px;
column-rule-style: double;
}
</style>
</head>
<body>
<h1 style = "text-align:center;color:green">
GeeksforGeeks
</h1>
<div class = "geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Producción:
Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<title>
CSS | column-rule-style Property
</title>
<style>
.geeks {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 35px;
-moz-column-rule-style: groove;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 35px;
-moz-column-rule-style: groove;
column-count: 3;
column-gap: 35px;
column-rule-style: groove;
}
</style>
</head>
<body>
<h1 style = "text-align:center;color:green">
GeeksforGeeks
</h1>
<div class = "geeks">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de estilo de regla de columna se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Safari 9.0, 31.0 -webkit-
- Opera 37.0, 15.0 -webkit-, 11.1
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA