Esempio
Specificare lo stile della regola tra le colonne:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà-regola in stile colonna specifica lo stile della regola tra le colonne.
| Valore di default: | none |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.columnRuleStyle="dotted" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| column-rule-style | 50.0 4.0 -webkit- | 10.0 | 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit 11.1 |
CSS Sintassi
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| none | Valore di default. Definisce nessuna regola | Gioca " |
| hidden | Definisce una regola nascosta | Gioca " |
| dotted | Definisce una regola tratteggiata | Gioca " |
| dashed | Definisce una regola tratteggiata | Gioca " |
| solid | Definisce una regola solida | Gioca " |
| double | Definisce una doppia regola | Gioca " |
| groove | Specifica una regola scanalato 3D. L'effetto dipende dai valori di larghezza e colore | Gioca " |
| ridge | Specifica una regola increspato 3D. L'effetto dipende dai valori di larghezza e colore | Gioca " |
| inset | Specifica una regola 3D inserto. L'effetto dipende dai valori di larghezza e colore | Gioca " |
| outset | Specifica una regola fin dall'inizio in 3D. L'effetto dipende dai valori di larghezza e colore | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Column-count
Dividere il testo in un <div> elemento in tre colonne:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Prova tu stesso " Colonna-gap
Dividere il testo in un <div> elemento in tre colonne, e specificare un intervallo di 40 pixel tra le colonne.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Prova tu stesso " Column-rule
Specificare la larghezza, lo stile e il colore della regola tra le colonne.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 più colonne
Di riferimento HTML DOM: columnRuleStyle property