طرح کلی (Outline)

آشنایی با ویژگی outline در CSS و تفاوت آن با border، کاربردهای دسترس‌پذیری و طراحی

طرح کلی (Outline) چیست؟

Outline خطی است که دور یک عنصر کشیده می‌شود، دقیقاً بیرون از border. اما برخلاف border، فضایی اشغال نمی‌کند و در Box Model محاسبه نمی‌شود.

تفاوت Outline و Border

ویژگیBorderOutline
فضا اشغال می‌کند؟✅ بله❌ خیر
تأثیر در Box Modelداردندارد
تأثیر در چیدمانداردندارد
هر طرف جداگانه✅ بله❌ فقط یکپارچه
گوشه گرد✅ دارد✅ دارد (مدرن)
اولویت نمایشعادیروی همه عناصر

ویژگی‌های Outline

ویژگیتوضیحمثال
outline-styleنوع خطsolid
outline-widthضخامت2px
outline-colorرنگred
outline-offsetفاصله از border5px
outlineخلاصه همه (Shorthand)2px solid blue

انواع outline-style

/* مقادیر مشابه border */
    outline-style: solid;    /* خط ممتد */
    outline-style: dashed;   /* خط‌چین */
    outline-style: dotted;   /* نقطه‌چین */
    outline-style: double;   /* دوبل */
    outline-style: none;     /* بدون outline */
    outline-style: auto;     /* مرورگر تصمیم می‌گیرد */

outline-offset (فاصله)

یکی از جذاب‌ترین ویژگی‌های outline — می‌توان آن را از border فاصله داد:

.box {
        outline: 2px solid #3498db;
        outline-offset: 4px;  /* ۴px فاصله از border */
    }
    
    /* مقدار منفی — داخل border */
    .inner-outline {
        outline: 2px solid red;
        outline-offset: -10px;
    }

outline:auto برای دسترس‌پذیری

/* مرورگر بهترین outline را برای دسترس‌پذیری نمایش می‌دهد */
    :focus-visible {
        outline: auto;
    }
    
    /* یا ساختار سفارشی */
    :focus-visible {
        outline: 3px solid #3498db;
        outline-offset: 2px;
    }

کاربردهای Outline

۱. عناصر قابل فوکس (Accessibility)

وقتی کاربر با Tab بین عناصر جابه‌جا می‌شود، outline نشان می‌دهد کدام عنصر فعال است:

/* هرگز outline را روی focus حذف نکنید! */
    /* ❌ بد */
    *:focus { outline: none; }
    
    /* ✅ خوب — سبک سفارشی */
    *:focus-visible {
        outline: 3px solid #3498db;
        outline-offset: 2px;
    }

۲. دیباگ سریع

/* همه عناصر را ببین */
    * {
        outline: 1px solid red;
    }

۳. افکت‌های بصری

.btn:hover {
        outline: 2px solid #3498db;
        outline-offset: 2px;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط