CSS Outline: สร้างขอบนอก (Outline) รอบองค์ประกอบ

เมื่อออกแบบองค์ประกอบเว็บ อาจต้องการ outline (ขอบนอก) รอบองค์ประกอบ เช่น กล่องที่ต้องการเน้น ใส่ outline สีสันรอบๆ เพื่อดึงดูดสายตา

นั่นคือที่มาของ CSS outline property เพิ่มเส้นด้านนอกขอบ (border) เพื่อให้องค์ประกอบโดดเด่น

บทเรียนนี้อธิบายพื้นฐาน outlines และการใช้ CSS outline property พร้อมตัวอย่าง จนจบคุณจะสร้าง outlines อย่างเชี่ยวชาญ

CSS Outline คืออะไร?

Outline = เส้นวาดรอบองค์ประกอบ นอกขอบ (border) ใช้งานหลัก: highlight องค์ประกอบ HTML

ภาพแสดง outline อยู่นอก content และ border เป็นชั้นนอกสุดขององค์ประกอบ

ความต่างระหว่าง Border และ Outline

1. ตำแหน่ง: Outline วาดนอกองค์ประกอบ (border วาดใน) อาจทับเนื้อหาอื่น แต่ outline ไม่ใช้พื้นที่ ไม่ส่งผลต่อองค์ประกอบรอบข้าง (ยกเว้นการทับ)
2. ขนาด: Outline ไม่ใช่ส่วนหนึ่งของ dimensions ขององค์ประกอบ ไม่ส่งผลต่อ height/width
3. ความสม่ำเสมอ: Outline ไม่สามารถกำหนด width, color, style ต่างกันแต่ละด้านได้ (border ทำได้) — outline จะเหมือนกันทุกด้าน

CSS Outline Property

outline property เพิ่ม outline ให้องค์ประกอบ เป็น shorthand ของ 3 sub-properties:

• outline-color — สี outline
• outline-style — รูปแบบ outline
• outline-width — ความหนา outline

Syntax:

outline: outline-color outline-style outline-width;

ค่าไม่จำเป็นต้องเรียงลำดับเฉพาะ

ตัวอย่าง: Outline สีแดง Dotted 3px

กล่องข้อความ "This is a box" ต้องการ: outline สีแดง 3px dotted + border สีดำ solid 1px

<html>
  <p class="outlineExample">This is a box.</p>
</html>

<style>
  .outlineExample {
    width: 100px;
    border: black solid 1px;
    outline: red dotted 3px;
  }
</style>

outline อยู่นอก border ในองค์ประกอบ

CSS Outline Sub-properties แยกกัน

1. CSS Outline Width

outline-width ความหนา outline รับค่า:

• thin (default 1px)
• medium (default 3px)
• thick (default 5px)
• ความยาว CSS: px, pt, cm, em, rem เป็นต้น

ตัวอย่าง: Outline สีน้ำเงิน solid 3px (medium)

<style>
  .outlineExample {
    width: 100px;
    border: black solid 1px;
    outline-style: solid;
    outline-color: red;
    outline-width: medium;
  }
</style>

2. CSS Outline Color

outline-color สี outline รับค่าสี CSS ทุกแบบ:

• name: blue, pink
• hex: #f7f7f7
• rgb: rgb(102, 211, 56)
• invert — inverting color
• hsl: hsl(0, 25%, 50%)

ตัวอย่าง: Outline สีน้ำเงิน solid 3px

<style>
  .outlineExample {
    width: 100px;
    border: black solid 1px;
    outline-style: solid;
    outline-color: blue;
    outline-width: medium;
  }
</style>

3. CSS Outline Style

outline-style รูปแบบ outline ค่าที่รับได้:

• dotted, dashed, groove, ridge, solid
• double, inset, outset, none, hidden

ตัวอย่างรูปแบบทั้งหมด:

CSS Outline Offset

outline-offset เพิ่มพื้นที่ว่างระหว่าง outline และ border

พื้นที่นี้โปร่งใส (transparent) outline-offset เป็น property แยกต่างหาก ไม่รวมใน outline shorthand

ตัวอย่าง: Outline Offset 10px

กล่อง: border สีดำ solid 1px, outline สีแดง solid 2px, offset 10px

<style>
  .outlineExample {
    width: 200px;
    border: black solid 1px;
    outline: red 2px solid;
    outline-offset: 10px;
  }
</style>

มีช่องว่าง 10px ระหว่าง border และ outline ทุกด้าน

สรุป

CSS outline property กำหนด outline รอบ border ขององค์ประกอบเว็บ เป็น shorthand ของ 3 sub-properties: outline-color, outline-width, outline-style เพิ่มเติม outline-offset สร้างพื้นที่ว่างระหว่าง outline และ border บทเรียนนี้ครอบคลุม outline property, sub-properties, และ outline-offset ตอนนี้คุณพร้อมออกแบบ outlines อย่างมืออาชีพ!