คุณสมบัติ column-rule-style ใน CSS

column-rule-style คืออะไร?

คุณสมบัติ column-rule-style กำหนด รูปแบบเส้นแบ่ง ระหว่างคอลัมน์ใน Multi-column Layout คล้ายกับ border-style

ค่าที่ใช้ได้

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-gap: 50px;
      column-rule-color: maroon;
      column-rule-style: dashed;   /* เส้นประ */
    }
  </style>
</head>
<body>
  <div class="demo">
    นี่คือข้อความตัวอย่างสำหรับทดสอบ column-rule-style
    เส้นแบ่งระหว่างคอลัมน์จะเป็นสี maroon แบบ dashed
    ข้อความจะไหลต่อเนื่องจากคอลัมน์หนึ่งไปอีกคอลัมน์หนึ่ง
    ลองเปลี่ยนค่า column-rule-style เป็น solid, dotted, double, groove, ridge
  </div>
</body>
</html>

Shorthand: column-rule

.demo {
  column-rule: 2px dashed maroon;  /* width style color */
  /* เทียบเท่า:
  column-rule-width: 2px;
  column-rule-style: dashed;
  column-rule-color: maroon; */
}

การเปรียบเทียบรูปแบบเส้น

.demo-solid    { column-rule: 2px solid #333; }
.demo-dashed   { column-rule: 2px dashed #333; }
.demo-dotted   { column-rule: 2px dotted #333; }
.demo-double   { column-rule: 4px double #333; }  /* double ต้องหนา >= 3px */
.demo-groove   { column-rule: 4px groove #333; }
.demo-ridge    { column-rule: 4px ridge #333; }
.demo-inset    { column-rule: 4px inset #333; }
.demo-outset   { column-rule: 4px outset #333; }

คำแนะนำ

• ใช้ shorthand column-rule เพื่อเขียนโค้ดสั้นลงและอ่านง่าย
• double ต้องการ width อย่างน้อย 3px จึงจะเห็นชัดเจน
• ค่า 3D (groove, ridge, inset, outset) ใช้กับสีที่มีความคอนทราสต์ดี
• ค่าเริ่มต้นคือ none - ต้องระบุ style ถึงจะเห็นเส้น
• ควรระบุ column-gap ให้เพียงพอ (อย่างน้อย 20-30px) เพื่อไม่ให้เส้นชิดข้อความ