Kolom-aturan-gaya - Trik CSS

Daftar Isi:

Anonim

The column-rule-styleCSS menspesifikasikan properti ketik baris yang ditarik antara kolom dalam tata letak CSS multi-kolom.

Properti itu sendiri agak terbatas. Saat kami mendeklarasikannya, itu akan menarik garis antara kolom CSS dengan lebar satu piksel dan hitam.

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

Segalanya menjadi lebih menarik ketika kita mulai menggabungkan column-rule-styledengan column-rule-properti lain , termasuk column-rule-width(untuk menyetel garis yang lebih tebal) dan column-rule-color(untuk mengubah warna).

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

Atau, hei, kita cukup menggunakan column-ruleproperti singkatan yang menggabungkan ketiganya dalam satu deklarasi:

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

Sintaksis

column-rule-style: ;
  • Nilai awal: none
  • Berlaku untuk: wadah multi-kolom
  • Diwariskan: tidak
  • Nilai yang dihitung: kata kunci tertentu
  • Jenis animasi: diskrit

Nilai

column-rule-style menerima nilai-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

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
10+ 12+ 3.5+ 4+ 3.2+ 11.5+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ Tidak 3.2+ Semua
Sumber: caniuse

Spesifikasi

Modul Tata Letak Multikolom CSS Level 1 (Draf Editor)