CSS Outline
CSS Outline چیست؟
Outline در CSS یک خط دور یک عنصر میکشد، شبیه به border اما تفاوتهایی دارد:
Outline خارج از مرز (border) و paddingقرار میگیرد.
* برخلاف border، outline فضای صفحه را اشغال نمیکند (یعنی باعث تغییر اندازه یا جابهجایی نمیشود).
* outline معمولاً برای جلب توجه به یک عنصر، مثل هنگام فوکوس (focus) استفاده میشود.
—
خصوصیات اصلی Outline:
| خصوصیت | توضیح |
| —————- | —————————-————- |
| `outline-color` | رنگ خط دور عنصر |
| `outline-style` | سبک خط (solid, dashed, dotted, none و…) |
| `outline-width` | ضخامت خط |
| `outline-offset` | فاصله بین outline و کادر (border) |
—
مثال CSS ساده:
button {
outline: 2px solid blue;
outline-offset: 4px;
}
—
تفاوت با Border:
| ویژگی | Border | Outline |
| ———————– | ——————————– | ————————— |
| فضای اشغال شده | بله (تغییر اندازه میدهد) | خیر (فضا را اشغال نمیکند) |
| موقعیت | داخل جعبه (بین padding و margin) | بیرون از جعبه (خارج border) |
| قابلیت گرد کردن گوشهها | بله | خیر |
—
کاربردها:
* نمایش واضح هنگام فوکوس روی عناصر فرم (مثلاً دکمهها، inputها)
* برای طراحی و تست در طول توسعه سایت
دیدگاهتان را بنویسید