Örnek
genişlik, stil ve sütunlar arasındaki kural rengini belirtin:
div
{
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Sütun-kural mülkiyet tüm sütun-rule- * özelliklerini ayarlamak için bir kestirme niteliktir.
Sütun-kural mülkiyet sütunlar arasındaki kuralın genişliği, stil ve renk ayarlar.
| Varsayılan değer: | medium none color |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes, see individual properties . Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.columnRule="3px outset blue" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
| özellik | |||||
|---|---|---|---|---|---|
| column-rule | 50.0 4,0 -webkit- | 10.0 | 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit 11.1 |
CSS sözdizimi
column-rule: Mülkiyet Değerler değer Açıklama column-rule-width sütunlar arasındaki kural genişliğini ayarlar. Varsayılan değer orta column-rule-style sütunlar arasındaki kuralın stilini ayarlar. Varsayılan değer yok ise column-rule-color sütunlar arasındaki kuralın rengini ayarlar. Varsayılan değer elemanın rengidir initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Kolon-sayımı
Bir metni bölün <div> üç sütun halinde element:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Kendin dene "
Kolon boşluğu
Bir metni bölün <div> üç sütun halinde element ve sütunlar arasındaki 40 piksel boşluk belirtin.
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;
}
Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Çoklu Sütunlar
HTML DOM referansı: columnRule property