Outline در CSS
حاشیه (border) را بلدید. outline ابزار نزدیک ولی با کار متفاوت است: حلقه‌ای بیرون جعبهٔ حاشیه می‌کشد و — برخلاف border — جای چیدمان اشغال نمی‌کند. همسایه‌ها با افزودن outline جابه‌جا نمی‌شوند.
outline در برابر border
این دو را در نقشهٔ ذهنی‌تان جدا نگه دارید.
📊 outline در برابر border
| ویژگی | Outline | Border |
|---|---|---|
| جای چیدمان | جا نمی‌گیرد؛ اندازهٔ جعبه عوض نمی‌شود | جا می‌گیرد؛ می‌تواند جعبهٔ حاشیه را بزرگ کند |
| جای معمول | بیرون لبهٔ حاشیه | دور padding |
| کار رایج | حلقهٔ فوکوس، تأکید موقت | لبهٔ دائمی UI و قاب کارت |
| در حساب اندازهٔ باکس‌مدل | نه | بله (با اندازه‌گذاری پیش‌فرض content-box) |
یک outline ساده
استایل، ضخامت و رنگ شبیه border کار می‌کنند — ولی حلقه بیرون می‌نشیند.
outline پایه
css.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}میان‌بر outline
همان سه‌تایی آشنا: ضخامت، استایل، رنگ. برای دیده شدن outline، استایل لازم است — فقط outline: 2px #000 کافی نیست.
میان‌بر outline
css.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}استایل‌های رایج outline
Solid، dashed و dotted انتخاب‌های روزمره‌اند. outline: none حلقه را برمی‌دارد — با احتیاط (پایین، دربارهٔ فوکوس).
نمونه‌های استایل outline
css.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }outline-offset — حلقه را بیرون بفرستید
outline-offset حلقه را از لبهٔ حاشیه دور (یا نزدیک) می‌کند بدون اینکه اندازهٔ چیدمان عوض شود. مقدار مثبت بیرون می‌راند؛ منفی تو می‌کشد.
outline با offset
css.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}ظاهر شبیه، هزینهٔ چیدمان فرق دارد
دو جعبه ممکن است شبیه به‌نظر برسند، ولی فقط border می‌گوید عنصر چقدر جا بگیرد.
border جا می‌گیرد؛ outline نه
css.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}
.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* هر دو پررنگ به‌نظر می‌رسند؛ .with-border عرض چیدمان بیشتری می‌گیرد */عادت دوستدار فوکوس
مرورگرها اغلب با outline (یا حلقهٔ شبیه) فوکوس صفحه‌کلید را نشان می‌دهند. روی همه‌چیز outline: none نگذارید. اگر فوکوس را از نو استایل می‌کنید، حلقهٔ جایگزینِ واضح بگذارید تا کاربر صفحه‌کلید بفهمد کجاست.
حلقهٔ فوکوس را نگه دارید
css.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}خودتان امتحان کنید
- به یک جعبهٔ پدینگ‌دار
borderوoutlineضخیم‌تر بدهید — ببینید همسایه‌ها سر جایشان می‌مانند. - استایل outline را بین
solid،dashedوdottedعوض کنید. outline-offset: 8pxبگذارید و حلقه را بیرون ببینید..with-borderو.with-outlineرا کنار هم بگذارید — وزن بصری شبیه، عرض چیدمان فرق دارد.- به‌جای حذف سراسری outline، روی دکمه
:focus-visibleرا استایل کنید.
اشتباهات رایج
- outline را مثل border در حساب عرض چیدمان آوردن (outline اندازه اضافه نمی‌کند)
- روی همهٔ عناصر
outline: noneگذاشتن و جایگزین فوکوس ندادن - انتظار اینکه outline همسایه‌ها را عقب براند (کار margin یا border است)
- ضخامت و رنگ بدون استایل (
solid/dashed/ …) - قاطی کردن outline با لایه‌های باکس‌مدلی که تازه یاد گرفتید
خلاصه
- Outline بیرون حاشیه کشیده می‌شود و جای چیدمان نمی‌گیرد
- میان‌بر: ضخامت، استایل، رنگ — استایل لازم است
outline-offsetحلقه را جابه‌جا می‌کند بدون عوض کردن اندازهٔ جعبه- Border برای لبهٔ دائمی؛ outline برای فوکوس و حلقهٔ موقت
- برای کاربر صفحه‌کلید، حلقهٔ فوکوس دیدنی (یا جایگزین هم‌ارز) را نگه دارید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود