{ Winter Code Room }

ตอนที่ 36 : [Tip] ว่าด้วยเรื่องของ Border (CSS)

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 276
    จำนวนคนให้กำลังใจ : 1 ครั้ง
    2 เม.ย. 57

 

ว่าด้วยเรื่องของ Border (CSS)

 

Border คือเส้นขอบค่ะ ไม่ว่าจะเห็นโค้ดที่มีคำว่า border ที่ไหนก็แล้วแต่
เราสามารถปรับแต่งเส้นขอบได้หลากหลายแบบ
เช่น ปรับขนาด, เปลี่ยนสี, เปลี่ยนชนิดของเส้นขอบได้ตามต้องการ
โดยจะใช้โค้ดเหล่านี้
        v
border-width: 300px;           /*ความกว้างของเส้นขอบ*/
border-color: #000000
;        /*สีของเส้นขอบ*/
border-style: dotted;            /*ชนิดของเส้นขอบ*/


หรือจะรวมโค้ดทั้งสามตัวนี้ก็จะเป็นแบบนี้ค่ะ
v

border :5px solid; width:300px;
 

ส่วนชนิดของเส้นขอบ มีหลากหลายแบบค่ะ
ไม่ว่าจะเป็นเส้นตรง เส้นประ จุด เส้นแบบสามมิติ หรือจะซ่อนเอาไว้ ฯลฯ
การแสดงผลของเส้นขอบ ในแต่ละเบราเซอร์ก็ค่อนข้างจะต่างกัน
(แต่ปัจจุบัน ส่วนใหญ่จะใช้ Google Chrome กัน รวมถึงไรเตอร์เองด้วย ^^)
ดูชนิดของเส้นขอบและการแสดงผลด้านล่างนี้เลยค่ะ
        v

 


 

ให้กำลังใจนักเขียน
นักเขียนได้รับกำลังใจแล้ว!
นักเขียนได้รับกำลังใจแล้ว 1 ครั้ง

391 ความคิดเห็น

  1. #271 krerkkiat (@krerkkiat) (จากตอนที่ 36)
    วันที่ 27 กรกฎาคม 2558 / 05:40
    เหมือนตรงที่อธิบายการรวมโค้ดจะผิดนะครับ ควรจะเป็น

    border: 5px solid #รหัสสี;

    เพราะจากที่อธิบายไว้
    border: 5px solid;  จะเป็นหนึ่งการตั้งค่าเกี่ยวกับ border
    ในขณะที่ width: 300px; จะถูกเบราร์เซอร์มองว่าเป็น เรื่องเกี่ยวกับความกว้าง แต่
    ไม่เกี่ยวกับความกว้างของ border เช่น ความกว้างของรูป ความกว้างของกล่องข้อความ บลาๆ

    และ ถ้าเป็นตามตัวอย่างที่ยกโค้ดแบบแยกไว้ เมื่อนำมารวมกันก็จะได้แบบนี้ครับ

    border: 300px dotted #000000;

    ข้อมูลเพิ่มเติ่มดูได้จากเว็บนี้ครับ 
    http://www.w3schools.com/css/css_border.asp

    #271
    0