พื้นฐาน 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 ใช้กับขอบซ้าย


เลื่อนขึ้นด้านบน