Exemplu
Specificați lățimea, stilul și culoarea regula între coloane:
div
{
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea coloana-regula este o proprietate prescurtare pentru stabilirea tuturor proprietăților coloane rule- *.
Proprietatea coloanei de reguli stabilește lățimea, stilul și culoarea regula între coloane.
| Valoare implicită: | medium none color |
|---|---|
| Mostenit: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.columnRule="3px outset blue" 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 | 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: Valori de proprietate Valoare Descriere column-rule-width Setează lățimea regulii între coloane. Valoarea implicită este medie column-rule-style Setează stilul de regula intre coloane. Valoarea implicită este nici unul column-rule-color Setează culoarea regula între coloane. Valoarea implicită este culoarea elementului initial Setează această proprietate la valoarea implicită. Citiți despre inițială 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 »
Pagini similare
Tutorial CSS3: Coloane multiple CSS3
HTML DOM referință: columnRule property