Sütun kuralı stili - CSS Hileleri

İçindekiler:

Anonim

column-rule-styleCSS özelliği belirtir CSS çok sütunlu düzeninde sütunları arasında çizilmiş çizginin yazın.

Mülkiyet kendi başına sınırlıdır. Bunu ilan ettiğimizde, bir piksel genişliğinde ve siyah olan CSS sütunları arasında bir çizgi çekecektir.

.columns ( columns: 2 600px; column-rule-style: solid; )

(Daha kalın bir çizgi ayarlamak için) ve (rengi değiştirmek için ) dahil olmak üzere column-rule-stylediğer column-rule-özelliklerle birleştirmeye başladığımızda işler daha ilginç hale geliyor .column-rule-widthcolumn-rule-color

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

Ya da, column-ruleüçünü tek bir bildirimde birleştiren steno özelliğini kullanabiliriz :

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Sözdizimi

column-rule-style: ;
  • Başlangıç ​​değeri: none
  • Şunlar için geçerlidir: çok sütunlu kaplar
  • Devralındı: hayır
  • Hesaplanan değer: belirtilen anahtar kelime
  • Animasyon türü: ayrık

Değerler

column-rule-style aşağıdaki değerleri kabul eder:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Demo

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mini
85+ 79+ Hayır 3.2+ Herşey
Kaynak: caniuse

Şartname

CSS Çok Sütunlu Düzen Modülü Seviye 1 (Editörün Taslağı)