แท็ก hr

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

ตัวอย่าง

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

html<hr>

Результат:

ตัวอย่าง

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

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

Результат:

ตัวอย่าง

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

html<hr style="color: red">

Результат:

ตัวอย่าง

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

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

Результат:

ตัวอย่าง

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

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

Результат:

ตัวอย่าง

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

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

Результат:

ตัวอย่าง

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

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

Результат:

ตัวอย่าง

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

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

Результат:

ดูเพิ่มเติม