آموزش خطوط بیرونی در CSS

تعریف Outline

در CSS، Outline یا خط بیرونی، خطی است که دور یک عنصر کشیده می‌شود اما خارج از مرز (border) آن عنصر قرار دارد.
به عنوان مثال، یک عنصر می‌تواند دارای یک border سیاه و یک outline سبز با ضخامت ۱۰px باشد.

تفاوت Outline با Border

• Outline همیشه بیرون از مرز عنصر رسم می‌شود.
• ممکن است روی محتوای دیگر قرار بگیرد.
• Outline جزو ابعاد عنصر محسوب نمی‌شود؛ یعنی عرض و ارتفاع کل عنصر تحت تأثیر ضخامت outline قرار نمی‌گیرد.
• در مقابل، Border بخشی از ابعاد عنصر است.

ویژگی‌های Outline در CSS

CSS چند ویژگی برای کنترل outline دارد:

• outline-style → تعیین سبک خط بیرونی
• outline-color → تعیین رنگ خط بیرونی
• outline-width → تعیین ضخامت خط بیرونی
• outline-offset → ایجاد فاصله بین خط بیرونی و مرز عنصر
• outline → ویژگی کوتاه‌نویسی (shorthand) برای همه موارد بالا

ویژگی outline-style

ویژگی outline-style سبک خط بیرونی را مشخص می‌کند و می‌تواند یکی از مقادیر زیر باشد:

• dotted → خط نقطه‌ای
• dashed → خط خط‌چین
• solid → خط یک‌دست
• double → خط دوتایی
• groove → خط سه‌بعدی شیار‌دار
• ridge → خط سه‌بعدی برجسته
• inset → خط سه‌بعدی فرو‌رفته
• outset → خط سه‌بعدی بیرون‌زده
• none → بدون خط بیرونی
• hidden → خط بیرونی مخفی

مثال: نمایش انواع outline-style

p.dotted {
  outline-style: dotted;
}

p.dashed {
  outline-style: dashed;
}

p.solid {
  outline-style: solid;
}

p.double {
  outline-style: double;
}

p.groove {
  outline-style: groove;
}

p.ridge {
  outline-style: ridge;
}

p.inset {
  outline-style: inset;
}

p.outset {
  outline-style: outset;
}

نتیجه اجرای مثال

• خط نقطه‌ای (dotted)
• خط خط‌چین (dashed)
• خط یک‌دست (solid)
• خط دوتایی (double)
• خط شیار‌دار سه‌بعدی (groove) → وابسته به رنگ outline
• خط برجسته سه‌بعدی (ridge) → وابسته به رنگ outline
• خط فرو‌رفته سه‌بعدی (inset) → وابسته به رنگ outline
• خط بیرون‌زده سه‌بعدی (outset) → وابسته به رنگ outline