คำสั่งที่เกี่ยวกับเส้นขอบ CSS

คำสั่งที่เกี่ยวกับเส้นขอบ

CSS

ในบทความนี้จะเป็นเรื่องของการเขียนเส้นขอบให้กับวัตถุ เช่นการเขียนเส้นคั่นระหว่างบทความ หรือเขียนเส้นขอบให้กับเนื้อหาเพื่อเน้นความสำคัญ 

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.คำสั่งกำหนดชนิดของขอบ
    จากตัวอย่างจะเป็นคำสั่งที่ใช้กำหนดชนิดของเส้นขอบ เช่น เส้นประ เส้นจุด หรือเส้น2เส้นซ้อนกัน 

    2.คำสั่งกำหนดขนาดของขอบ
    หัวข้อที่แล้วเป็นการสร้างเส้นขอบชนิดต่าง ในหัวข้อนี้จะเป็นการกำหนดขนาดให้กับเส้นขอบ 

    3.คำสั่งกำหนดสีของขอบ
    ตัวอย่างจะเป็นการกำหนดสีเส้นขอบ ซึ่งการระบุสีก็เหมือนกับที่ระบุใน HTML 

    4.คำสั่งกำหนดด้านที่ต้องการให้แสดงผล
    สามารถกำหนดด้านที่ต้องการให้แสดงผลได้ เช่นแสดงผลในด้านซ้ายเท่านั้น หรือแสดงผลในด้านบนเท่านั้น

    5.คำสั่งกำหนดด้านที่ต้องการแสดงผลด้วยรูปแบบของเส้นขอบที่ต่างกัน
    สามารถกำหนดด้านที่เราต้องการแสดงผล และกำหนดรูปแบบของเส้นที่ต้องการแสดงผลได้ด้วย 

    6.คำสั่งกำหนดขนาดของด้านต่างๆ
    สามารถกำหนดขนาดของเส้นขอบในด้านต่างๆได้ ดังตัวอย่าง

    7.คำสั่งกำหนดสีของด้านต่างๆ
    สามารถกำหนดสีให้กับเส้นขอบในด้านต่างๆได้ ดังตัวอย่าง

    8.คำสั่งกำหนดสีของด้านต่างๆ แบบที่2
    เป็นอีกตัวอย่างของการกำหนดสีให้กับเส้นขอบ ซึ่งเราไม่ได้ใช้คำสั่งบอกว่าขอบซ้ายหรือขวา แต่เราจะใช้ค่ากำหนดเอา สามารถกำหนดค่าได้ไม่เกิน 4 ค่า เป็นค่าของขอบแต่ล่ะขอบ รายละเอียดของการกำหนดค่าอ่านได้ด้านล่าง

    9.คำสั่งแบบรวม
    ในตัวอย่างเป็นคำสั่งที่ใช้สั่งรวมๆ ใช้สั่งได้ทั้งสี รูปแบบของเส้นขอบ และขนาด

การกำหนดค่าของเส้นขอบเช่น รูปแบบเส้นที่แสดงผล , ความหนาของขอบ , สีของขอบ 

    1.กำหนดค่าของขอบเพียงค่าเดียว จะแสดงผลโดยนำไปใช้กับเส้นขอบทุกด้าน 

    2.กำหนดค่าของขอบ 2 ค่า จะแสดงผลโดย ค่าแรกจะใช้กับ ขอบบน และล่าง ค่าที่สอง จะใช้กับขอบซ้าย และขวา 

    3.กำหนดค่าของขอบ 3 ค่า จะแสดงผลโดยค่าที่ 1 ใชกับขอบบน ค่าที่ 2 ใชกับขอบซ้าย และขวา ค่าที่ 3 ใช้กับขอบล่าง 

    4.กำหนดค่าของขอบ 4 ค่า จะแสดงผลโดยค่าที่ 1 ใชกับขอบบน ค่าที่ 2 ใชกับขอบขวา ค่าที่ 3 ใช้กับขอบล่าง ค่าที่ 4 ใช้กับขอบซ้าย