English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo column-rule-style CSS imposta lo stile delle regole disegnate tra le colonne in un layout a più colonne.
La tabella seguente fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso in script JavaScript.
| Valore predefinito: | none |
|---|---|
| Applicabile a: | Elementi a più colonne |
| Ereditarietà: | No |
| Animabile: | No.Vedere: Proprietà animate. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | oggetto.style.columnRuleStyle="dotted" |
La sintassi di questo attributo è la seguente:
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
Il seguente esempio dimostra come utilizzare la proprietà column-rule-style.
p {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 100px;
-webkit-column-rule-color: rosso;
-webkit-column-rule-width: 2px;
-webkit-column-rule-style: solido;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 100px;
-moz-column-rule-color: rosso;
-moz-column-rule-width: 2px;
-moz-column-rule-style: solido;
column-count: 3;
column-gap: 100px;
column-rule-color: rosso;
column-rule-width: 2px;
column-rule-style: solid;
}Prova a vedere‹/›La tabella sottostante descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| none | Non visualizza alcuna regola. |
| hidden | Non visualizza alcuna regola. È uguale a none. |
| dotted | Visualizza le regole come una serie di punti. |
| dashed | Visualizza le regole come una serie di segmenti di linee corti, ossia trattini. |
| solid | Visualizza le regole come una linea continua. |
| double | Visualizza le regole come due linee parallele, con alcune spaziature tra di loro. La somma delle linee e la loro spaziatura equivalgono acolumn-rule-widthvalori dell'attributo. |
| groove | Visualizza regole incise nella pagina. Esso dà un impatto 3D, spesso realizzato creando ombre di due colori, che sono piùcolumn-rule-colorcolore leggermente più chiaro e più scuro. |
| ridge | Visualizza regole con effetto opposto rispetto a groove. Esso anche dà un impatto 3D, le regole sembrano venire fuori dalla pagina. |
| inset | Visualizza le stesse regole di ridge. |
| outset | Visualizza le stesse regole di groove. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo column-rule-style del suo elemento padre. |
Attenzione:L'attributo column-rule-style utilizza基本上i valori definitiborder-style, ma l'interpretazione di questi valori è diversa daModello di bordo piegato identico.
Compatibilità dei browser per l'attributo column-rule-style, i numeri nella tabella sotto rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:Layout a più colonne CSS3.
Proprietà correlate:column-width,column-fill,column-gap,column-rule,column-rule-width,column-rule-color,column-span,column-count,columns.