La propiedad column-rule-color de CSS se usa para cambiar el color de la regla entre las columnas.
Sintaxis:
column-rule-color: color | initial | inherit
Valores de propiedad:
- color: se utiliza para establecer el color de la regla en cualquier color CSS válido.
- initial: Se utiliza para establecer el color por defecto de la regla.
- heredar: en este el color se heredará de su elemento padre.
Ejemplo :
<!DOCTYPE html> <html> <head> <title> CSS property | column-rule-color </title> <!-- column-rule-color CSS property --> <style> p.one{ column-gap: 50px; column-count: 3; column-rule-style: solid; column-rule-width: 10px; column-rule-color: green; border: 1px solid black; text-align: center; } p.two{ column-gap: 50px; column-count: 3; column-rule-style: solid; column-rule-width: 10px; column-rule-color: #000080; border: 1px solid black; text-align: center; } p.three{ column-gap: 50px; column-count: 3; column-rule-style: solid; column-rule-width: 10px; column-rule-color: rgb(0, 191, 255); border: 1px solid black; text-align: center; } p.four{ column-gap: 50px; column-count: 3; column-rule-style: solid; column-rule-width: 10px; column-rule-color: initial; border: 1px solid black; text-align: center; } </style> </head> <body> <!-- column-rule-color: green; property --> <p class="one"> 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. </p> <!-- column-rule-color: #000080; property --> <p class="two"> 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. </p> <!-- column-rule-color: rgb(0, 191, 255); property --> <p class="three"> 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. </p> <!-- column-rule-color: initial; property --> <p class="four"> 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. </p> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad column-rule-color 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-
Referencia: Red de desarrolladores de Mozilla (MDN)
Comente a continuación, si encontró algún error o si tiene sugerencias para mejorar.