การใส่ 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