CSS Border คำสั่งที่ใช้บ่อย

html-css

เว็บไซต์ไหนๆ ก็มีการใช้คำสั่ง Border หรือการตีเส้นของกรอบภาพ กรอบข้อความ และถ้าคุณยังใช้คำสั่งนี้ยังไม่ถูกต้องหรือเข้าใจแต่ไม่ละเอียด สามารถเรียนรู้การใช้งานได้จากบทความนี้ เพราะเรากำลังจะนำคำสั่งของการตีกรอบ border มาอธิบายกันให้หมดเปลือก ด้วยคำสั่ง CSS Border แล้วคุณจะเข้าใจว่า คำสั่ง border มีอะไรให้เลือกไช้ได้หลากหลายอย่างจริงๆ

คุณเคยใช้คำสั่ง border ในการตีตารางแบบไหนบ้าง แบบเส้นประ หรือเส้นธรรมดา

ตัวอย่างการใช้ CSS border-style property

ขออธิบายล่วงหน้าก่อนที่จะเข้าดูตัวอย่างคำสั่งการตีกรอบ border คำสั่งเริ่มต้นด้วย border-style และตามด้วย การตีเส้นแต่ละด้าน ประกอบด้วย

  • Top หมายถึง การตีเ้ส้นด้านบน
  • Right หมายถึง การตีเส้นด้านขวา
  • Bottom หมายถึง การตีเ้้ส้นด้านล่าง
  • Left หมายถึง การตีเส้นทางซ้ายมือ

ดังนั้น ถ้ามีการกำหนดคำสั่ง หลัง border-style แสดงว่า มีการกำหนดลักษณะของเส้นของตาราง ตามลำดับข้างต้น

  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

ลักษณะของเส้นที่สามารถใช้ตีตารางได้

css border style
css border style
  • none หมายถึง การไม่ตีเส้น
  • dotted หมายถึง ใช้จุดต่อเนื่อง ( . ) ในการตีเส้น
  • dashed หมายถึง ใช้เครื่องหมายลบ ( – ) ในการตีเส้น
  • solid หมายถึง การตีเ้ส้นทึบ
  • double หมายถึง การตีสองเส้นคู่กัน
  • groove หมายถึง การตีเส้นที่มีรอง
  • ridge หมายถึง การตีเ้สนที่มีสันนูนขึ้นมา
  • inset หมายถึง การตีเส้นด้านใน
  • outset หมายถึง การตีเส้นด้านนอก

คุณทราบหรือไม่ว่า ความพิเศษของคำสั่ง border คืออะไร คำตอบก็คือ เราสามารถเลือก style ของการตีกรอบ หลายๆ อย่างรวมกันได้ด้วย ตัวอย่างเช่น ด้านบนตีตารางด้วยเส้นประ ด้านล่างตีด้วยเส้นแบบต่อเนื่อง เป็นต้น

Avatar
About Mr. ONE - Admin 1540 Articles
ทำงานด้านไอทีโดยเฉพาะ ชอบเทคโนโลยีเป็นชีวิตจิตใจ ชอบขีดๆ เขียนๆ โดยเฉพาะเขียนข้อมูลเกี่ยวกับการใช้คอมพิวเตอร์ โปรแกรม มีประสบการณ์การเขียนหนังสือคอมพิวเตอร์ เขียนแบบเรียนระบบสารสนเทศทางด้านโรงแรม