แท็ก hr

แท็ก hr กำหนดเส้นคั่นแนวนอน ข้อดีของแท็กคือ ไม่จำเป็นต้อง สร้างบล็อกเพิ่มเติมเพื่อวาดเส้นเดี่ยว ไม่ต้องการแท็กปิด

ตัวอย่าง

มาดูกันว่าแท็ก hr ทำงานอย่างไร:

<hr>

ลองเปลี่ยนสีเส้นโดยใช้ คุณสมบัติ CSS border-color:

<hr style="border-color: red;">

สีเส้นยังสามารถเปลี่ยนได้ด้วยคุณสมบัติ color (ในกรณีที่กำหนดคุณสมบัติ color และ border-color พร้อมกัน - อันที่สองจะมีลำดับความสำคัญสูงกว่า):

<hr style="color: red">

ตอนนี้ลองเปลี่ยนสีเส้นโดยใช้ คุณสมบัติ CSS border โปรดสังเกตว่าเส้นจะ มีความหนาเป็นสองเท่า (เนื่องจากเรากำหนด ขอบทั้งด้านบนและด้านล่าง):

<hr style="border: 1px solid red;">

ลองเปลี่ยนสีเส้นโดยใช้ CSS คุณสมบัติ border-top และกำหนดเฉพาะขอบด้านบน ตอนนี้ จะไม่มีเส้นคู่:

<hr style="border-top: 1px solid red;">

มาทำให้เส้นเป็นจุดโดยใช้ คุณสมบัติ CSS border-top กำหนดค่า dotted แทน solid:

<hr style="border-top: 1px dotted red;">

ลองเพิ่มความหนาของเส้นโดยใช้ คุณสมบัติ CSS border-width:

<hr style="border-width: 10px; border-color: red;">

และตอนนี้ให้เพิ่มความสูง height ให้เส้น และเพิ่มขอบผ่าน border ขอบจะแยกออกเป็นด้านบนและด้านล่าง:

<hr style="height: 10px; border: 1px solid red;">