Örnek
sütunlar arasındaki kuralının stilini belirtin:
div
{
-webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
-moz-column-rule-style: dotted; /* Firefox */
column-rule-style: dotted;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
sütun kural dönem tesisi sütunlar arasındaki kuralın tarzını belirler.
| Varsayılan değer: | none |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.columnRuleStyle="dotted" 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-style | 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-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;Mülkiyet Değerler
| değer | Açıklama | Oynat |
|---|---|---|
| none | Varsayılan değer. Hiçbir kural tanımlar | Oynat " |
| hidden | Gizli bir kural tanımlar | Oynat " |
| dotted | noktalı cetvel tanımlar | Oynat " |
| dashed | Bir kesik kuralı tanımlar | Oynat " |
| solid | sağlam kuralı tanımlar | Oynat " |
| double | Bir çift kuralı tanımlar | Oynat " |
| groove | 3D yivli kuralını belirtir. etki genişliği ve renk değerlerine bağlıdır | Oynat " |
| ridge | 3D çıkıntılı kuralını belirtir. etki genişliği ve renk değerlerine bağlıdır | Oynat " |
| inset | 3D gömme kuralını belirtir. etki genişliği ve renk değerlerine bağlıdır | Oynat " |
| outset | 3D outset kuralını belirtir. etki genişliği ve renk değerlerine bağlıdır | 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ı: columnRuleStyle property