Estilo-regla-columna - Trucos CSS

Tabla de contenido:

Anonim

La column-rule-stylepropiedad CSS especifica el tipo de línea que se dibuja entre columnas en un diseño CSS de varias columnas.

La propiedad es algo limitada por sí sola. Cuando lo declaramos, dibujará una línea entre las columnas CSS de un píxel de ancho y negra.

.columns ( columns: 2 600px; column-rule-style: solid; )

Las cosas se vuelven más interesantes cuando comenzamos a combinar column-rule-stylecon otras column-rule-propiedades, incluidas column-rule-width(para establecer una línea más gruesa) y column-rule-color(para cambiar el color).

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

O bien, simplemente podemos usar la column-rulepropiedad abreviada que combina los tres en una sola declaración:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Sintaxis

column-rule-style: ;
  • Valor inicial: none
  • Se aplica a: contenedores de varias columnas
  • Heredado: no
  • Valor calculado: palabra clave especificada
  • Tipo de animación: discreto

Valores

column-rule-style acepta los siguientes valores:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Manifestación

Soporte de navegador

ES DECIR Borde Firefox Cromo Safari Ópera
10+ 12+ 3.5+ 4+ 3.2+ 11,5+
Android Chrome Android Firefox Navegador de Android Safari de iOS mini Opera
85+ 79+ No 3.2+ Todos
Fuente: caniuse

Especificación

Módulo de diseño de varias columnas CSS, nivel 1 (borrador del editor)