Örnek
sütunlar arasındaki kural genişliğini belirtir:
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari,
Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
sütun kural genişliği özelliği sütunlar arasındaki kural genişliğini belirtir.
| Varsayılan değer: | medium |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.columnRuleWidth="10px" 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-width | 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-width: medium|thin|thick| Mülkiyet Değerler değer Açıklama Oynat medium Varsayılan değer. orta kuralı tanımlar Oynat " thin ince bir kural tanımlar Oynat " thick Kalın bir kural tanımlar Oynat " length Çizginin genişliğini belirtir Oynat " initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun Oynat " 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 "
Kolon-kural
sütunlar arasındaki kuralın genişliği, stil ve renk 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;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Çoklu Sütunlar
HTML DOM referansı: columnRuleWidth property