เพื่อตั้งค่ากฎ (เส้นแบ่ง) ระหว่างคอลัมน์ ให้ใช้ shorthand column-rule ซึ่งรวมคุณสมบัติ:
column-rule-width: ความกว้างเส้นแบ่ง column-rule-style: สไตล์เส้นแบ่ง column-rule-color: สีเส้นแบ่ง
ค่ารวมได้ดังนี้:
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;
ตัวอย่างที่ 1: ใช้ shorthand column-rule
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 5; -webkit-column-count: 5; -moz-column-count: 5; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; -webkit-column-rule: 5px dotted orange; -moz-column-rule: 5px dotted orange; column-rule: 5px dotted orange; } </style> </head> <body> <h1>PyTorch</h1> <div class="demo"> PyTorch is defined as an open source machine learning library for Python... </div> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ใช้คุณสมบัติย่อยแยกกัน
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; -webkit-column-rule-color: blue; -moz-column-rule-color: blue; column-rule-color: blue; -webkit-column-rule-style: double; -moz-column-rule-style: double; column-rule-style: double; } </style> </head> <body> <h1>PyTorch</h1> <div class="demo"> PyTorch is defined as an open source machine learning library for Python... </div> </body> </html>
ผลลัพธ์
ค่าของ column-rule-style
- none - ไม่มีเส้น (ค่าเริ่มต้น)
- solid - เส้นทึบ
- dashed - เส้นประ
- dotted - จุด
- double - เส้นคู่
- groove, ridge, inset, outset - เอฟเฟกต์ 3D
คุณสมบัติคอลัมน์ครบชุด
columns: 200px 3; /* shorthand width count */ column-width: 200px; /* ความกว้างขั้นต่ำ */ column-count: 3; /* จำนวนสูงสุด */ column-gap: 20px; /* ช่องว่าง */ column-rule: 1px solid #ccc; /* เส้นแบ่ง shorthand */ column-fill: balance; /* balance | auto */ column-span: all; /* ให้ heading ข้ามคอลัมน์ */
