Gaya lajur-peraturan - Trik CSS

Isi kandungan:

Anonim

Yang column-rule-styledinyatakan oleh harta CSS menaip barisan yang yang dibuat antara lajur dalam susun atur CSS berbilang lajur.

Tempat penginapan ini agak terhad. Apabila kita menyatakannya, ia akan menarik garis antara lajur CSS yang lebarnya satu piksel dan hitam.

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

Perkara menjadi lebih menarik apabila kita mula menggabungkan column-rule-styledengan column-rule-sifat lain , termasuk column-rule-width(untuk menetapkan garis yang lebih tebal) dan column-rule-color(untuk menukar warna).

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

Atau, hei, kita hanya boleh menggunakan column-ruleharta pendek yang menggabungkan ketiga-tiganya dalam satu deklarasi:

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

Sintaks

column-rule-style: ;
  • Nilai awal: none
  • Berlaku untuk: bekas berbilang lajur
  • Diwarisi: tidak
  • Nilai dikira: kata kunci yang ditentukan
  • Jenis animasi: diskret

Nilai

column-rule-style menerima nilai berikut:

/* 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

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mini
85+ 79+ Tidak 3.2+ Semua
Sumber: caniuse

Spesifikasi

Modul Tata Letak Multi-lajur CSS Tahap 1 (Draf Editor)