การใส่ style โดยใช้ CSS Outline

Outline มีลักษณะเป็นยังไง ???

outline มีลักษณะเป็นบล็อก คล้าย ๆ กับ border แต่จะอยู่ส่วนนอกหรือรอบ ๆ ของ border

เราสามารถกำหนดลักษณะทั้งขนาด สี หรือ Style ให้กับ outline ได้ ดังนั้นในบทความนี้ เรามาดูวิธีกันครับ



CSS Outline จะมีลักษณะเป็นเส้น อยู่รอบ ๆ element ซึ่งอยู่ข้างนอกของ border อีกรอบหนึ่ง แต่อย่างไรก็ตาม Outline จะมี property ที่แตกต่างจาก border






Property ต่าง ๆ ของ outline ใน CSS

outline เป็นการกำหนด style ต่าง ๆ ให้กับ outline อย่างเช่น outline-color outline-style outline-width

outline-color เป็นการกำหนดสีของ outline สามารถใส่ได้ทั้ง ชื่อสี หรือรหัสสี

outline-style เป็นการกำหนดลักษณะของ outline อย่างเช่น none dotted dashed solid double groove ridge inset outset

outline-width เป็นการกำหนดขนาดของ outline อย่างเช่น thin medium thick หรือขนาด



ตัวอย่างการใส่ outline ให้กับ element





ตัวอย่างที่ 1



ตัวอย่างที่ 1



ตัวอย่างที่ 2



ตัวอย่างที่ 2


A dotted outline
A dashed outline
A solid outline
A double outline
A groove outline
A ridge outline
An inset outline
An outset outline


A dotted outline
A dashed outline
A solid outline
A double outline
A groove outline
A ridge outline
An inset outline
An outset outline