Contoh
Tentukan gaya aturan antara kolom:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti kolom-aturan gaya menentukan gaya aturan antara kolom.
| nilai default: | none |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.columnRuleStyle="dotted" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| 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 Syntax
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| none | nilai default. Mendefinisikan ada aturan | Mainkan " |
| hidden | Mendefinisikan aturan tersembunyi | Mainkan " |
| dotted | Mendefinisikan aturan bertitik | Mainkan " |
| dashed | Mendefinisikan aturan putus-putus | Mainkan " |
| solid | Mendefinisikan aturan yang solid | Mainkan " |
| double | Mendefinisikan aturan ganda | Mainkan " |
| groove | Menentukan aturan beralur 3D. Efeknya tergantung pada lebar dan warna nilai-nilai | Mainkan " |
| ridge | Menentukan aturan bergerigi 3D. Efeknya tergantung pada lebar dan warna nilai-nilai | Mainkan " |
| inset | Menentukan aturan inset 3D. Efeknya tergantung pada lebar dan warna nilai-nilai | Mainkan " |
| outset | Menentukan aturan awal 3D. Efeknya tergantung pada lebar dan warna nilai-nilai | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Kolom-count
Membagi teks dalam <div> elemen menjadi tiga kolom:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Cobalah sendiri " Kolom-gap
Membagi teks dalam <div> elemen menjadi tiga kolom, dan menentukan kesenjangan 40 piksel antara kolom.
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;
}
Cobalah sendiri " Kolom-aturan
Tentukan lebar, gaya dan warna aturan antara kolom.
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;
}
Cobalah sendiri " Pages terkait
CSS3 tutorial: CSS3 Beberapa Kolom
Referensi HTML DOM: columnRuleStyle property