English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-rule-O estilo CSS define o estilo da regra entre as colunas na configuração de layout de colunas.
A tabela a seguir fornece uma descrição de uso e histórico de versões deste atributo, bem como a sintaxe de uso do atributo no script JavaScript.
| Valor padrão: | none |
|---|---|
| Aplicável a: | Elementos de colunas múltiplas |
| Herança: | Nenhum |
| Animável: | Não.Veja também Atributos de animação。 |
| Versão: | CSS3nova funcionalidade |
| Sintaxe do JavaScript: | object.style.columnRuleStyle="pontilhado" |
A sintaxe deste atributo é a seguinte:
column-rule-style: nenhum | escondido | pontilhado | tracejado | sólido | duplo | groove | ridge | inset | outset | inicial | herdado
O exemplo a seguir demonstra como usar column-rule-propriedade do estilo.
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;
}Teste para ver‹/›A tabela a seguir descreve os valores dessa propriedade.
| Valor | Descrição |
|---|---|
| none | Não exibe nenhuma regra. |
| hidden | Não exibe nenhuma regra. Idêntico a none. |
| dotted | Exibe a regra como uma série de pontos. |
| dashed | Exibe a regra como uma série de pequenos segmentos de linha, ou traços. |
| solid | Exibe a regra como uma linha sólida. |
| double | Exibe as regras como duas linhas paralelas, com um espaço entre elas. A soma das duas linhas e o espaço entre elas é igual acolumn-rule-widthvalor da propriedade. |
| groove | Exibe regras gravadas na página. Oferece3D da impressão, geralmente implementado criando duas sombras de cores, que são mais claras e escurecidas do quecolumn-rule-colorcom cores ligeiramente mais claras e escurecidas. |
| ridge | Exibe regras com efeito contrário ao groove. Também oferece3D da impressão, as regras parecem sair da página. |
| inset | Exibe as regras idênticas às do ridge. |
| outset | Exibe as regras idênticas às do groove. |
| initial | Defina essa propriedade para seu valor padrão. |
| inherit | Se especificado, o elemento relacionado usa o valor column do pai-rule-Os valores das propriedades do estilo. |
Nota:Este column-rule-O estilo da propriedade geralmente adota o valor definidoborder-stylemas a interpretação desses valores é diferente deModelo de borda dobrável idêntico。
column-rule-A compatibilidade do estilo de propriedade do navegador, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa propriedade.
|
Consulte o seguinte tutorial:CSS3Alinhamento de colunas múltiplas。
Propriedades relacionadas:column-width，column-fill，column-gap，column-rule，column-rule-width，column-rule-color，column-span，column-count，columns。