English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-rule-Establece el estilo de la regla entre columnas en el diseño de multicolumna del atributo style.
La tabla a continuación muestra la explicación de uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | none |
|---|---|
| Aplicable a: | Elementos de múltiples columnas |
| Herencia: | Ninguno |
| Animable: | No.Ver: Atributos de animación。 |
| Versión: | CSS3nuevas características |
| Sintaxis de JavaScript: | object.style.columnRuleStyle="dotted" |
La sintaxis de este atributo es la siguiente:
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
El siguiente ejemplo muestra cómo usar column-rule-Atributo style.
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule-color: red;
-webkit-column-rule-width: 2px;
-webkit-column-rule-style: solid;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule-color: red;
-moz-column-rule-width: 2px;
-moz-column-rule-style: solid;
column-count: 3;
column-gap: 100px;
column-rule-color: red;
column-rule-width: 2px;
column-rule-style: solid;
}Prueba aquí‹/›La tabla a continuación describe los valores de esta propiedad.
| Valor | Descripción |
|---|---|
| none | No mostrar ninguna regla. |
| hidden | No mostrar ninguna regla. Equivalente a none. |
| dotted | Mostrar las reglas como una serie de puntos. |
| dashed | Mostrar las reglas como una serie de segmentos cortos, es decir, guiones. |
| solid | Mostrar las reglas como una línea continua. |
| double | Mostrar las reglas como dos líneas paralelas, con un espacio entre ellas. La suma de las dos líneas y el espacio entre ellas es igual acolumn-rule-widthvalor del atributo. |
| groove | Mostrar las reglas grabadas en la página. Da una3La impresión de D, generalmente se realiza creando dos sombras de colores, y estas sombras de colores son máscolumn-rule-colorEl color ligeramente más claro y oscuro. |
| ridge | Mostrar reglas con el efecto opuesto al groove. También da una3La impresión de D, las reglas parecen salir de la página. |
| inset | Mostrar las reglas iguales a las reglas ridge. |
| outset | Mostrar las reglas iguales a las reglas groove. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el valor de column del elemento padre-rule-el valor del atributo style. |
Nota:este column-rule-El atributo style básicamente utiliza el valor definidoborder-stylepero la interpretación de estos valores es diferente deEl modelo de borde plegable es el mismo。
column-rule-La compatibilidad del navegador del atributo style, los números en la tabla a continuación representan la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.
|
Consulte los siguientes tutoriales:CSS3Diseño de multicolumnas。
Propiedades relacionadas:column-width，column-fill，column-gap，column-rule，column-rule-width，column-rule-color，column-span，column-count，columns。