Przykład
Określ styl rządów między kolumnami:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Obiekt kolumna-rule-style określa styl rządów między kolumnami.
| Domyślna wartość: | none |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.columnRuleStyle="dotted" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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 |
Składnia CSS
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| none | Domyślna wartość. Definiuje żadnej reguły | Graj " |
| hidden | Definiuje ukrytą regułę | Graj " |
| dotted | Definiuje reguły przerywana | Graj " |
| dashed | Definiuje reguły przerywana | Graj " |
| solid | Definiuje stałą regułę | Graj " |
| double | Definiuje podwójną zasadę | Graj " |
| groove | Określa rowkowane regułę 3D. Efekt zależy od wartości, szerokość i kolor | Graj " |
| ridge | Określa prążkowane regułę 3D. Efekt zależy od wartości, szerokość i kolor | Graj " |
| inset | Określa regułę 3D wstawka. Efekt zależy od wartości, szerokość i kolor | Graj " |
| outset | Określa regułę początku 3D. Efekt zależy od wartości, szerokość i kolor | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Column-count
Podzielić tekst w <div> elementu w trzech kolumnach:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Spróbuj sam " Kolumna-gap
Podzielić tekst w <div> elementu na trzy kolumny, a następnie określ odstęp 40 pikseli między kolumnami.
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;
}
Spróbuj sam " Kolumna-rule
Określ szerokość, styl i kolor reguły między kolumnami.
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;
}
Spróbuj sam " Podobne strony
Tutorial CSS3: CSS3 wielu kolumnach
HTML DOM referencyjny: columnRuleStyle property