Exemplu
Precizați stilul regulii între coloane:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea regula stil coloana specifica stilul de regula intre coloane.
Valoare implicită: | none |
---|---|
Mostenit: | no |
Animatable: | no. Read about animatable |
Versiune: | CSS3 |
sintaxa JavaScript: | object .style.columnRuleStyle="dotted" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
Proprietate | |||||
---|---|---|---|---|---|
column-rule-style | 50.0 4.0 -webkit- | 10.0 | 2.0 -moz- | 9 3.1 -webkit- | 37.0 15,0 -webkit 11.1 |
CSS Sintaxa
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Valori de proprietate
Valoare | Descriere | Joaca-l |
---|---|---|
none | Valoare implicită. Definește nici o regulă | Joaca - l » |
hidden | Definește o regulă ascunsă | Joaca - l » |
dotted | Definește o regulă punctată | Joaca - l » |
dashed | Definește o regulă punctată | Joaca - l » |
solid | Definește o regulă solidă | Joaca - l » |
double | Definește o regulă dublă | Joaca - l » |
groove | Specifică o regulă canelat 3D. Efectul depinde de valorile de lățime și culoare | Joaca - l » |
ridge | Specifică o regulă crestata 3D. Efectul depinde de valorile de lățime și culoare | Joaca - l » |
inset | Specifică o regulă 3D insertie. Efectul depinde de valorile de lățime și culoare | Joaca - l » |
outset | Specifică o regulă 3D început. Efectul depinde de valorile de lățime și culoare | Joaca - l » |
initial | Setează această proprietate la valoarea implicită. Citiți despre inițială | Joaca - l » |
inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Mai multe exemple
Coloana-count
Împărțiți textul într - un <div> elementul în trei coloane:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Încearcă - l singur » Coloana-gap
Împărțiți textul într - un <div> elementul în trei coloane și specificați un decalaj de 40 de pixeli între coloane.
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;
}
Încearcă - l singur » Coloana regulă
Specificați lățimea, stilul și culoarea regula între coloane.
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;
}
Încearcă - l singur » Pagini similare
Tutorial CSS3: Coloane multiple CSS3
HTML DOM referință: columnRuleStyle property