تنظیم offset در outline با CSS
در طراحی وب، outline یکی از ویژگی‌های مهم برای بهبود دسترسی و تمرکز بر روی عناصر است. برخلاف border که فضای عنصر را اشغال می‌کند، outline خارج از مدل جعبه (box model) قرار می‌گیرد و بر چیدمان صفحه تأثیری ندارد.
نکته: outline-offset خاصیتی است که فاصله outline را از لبه عنصر تعیین می‌کند و مقدار آن می‌تواند مثبت یا منفی باشد.
کاربردهای outline-offset
- ایجاد افکت‌های بصری جذاب برای hover
- بهبود دسترسی (accessibility) برای کاربران کیبورد
- طراحی فرم‌های تعاملی بدون تغییر layout
| مقدار |
تأثیر |
| 10px |
فاصله 10 پیکسل از لبه عنصر |
| -5px |
outline به داخل عنصر منتقل می‌شود |
مثال عملی
کد زیر نحوه استفاده از outline-offset را نشان می‌دهد:
button {
outline: 2px dashed #3498db;
outline-offset: 8px;
padding: 10px 20px;
}
برای یادگیری بیشتر درباره این ویژگی، می‌توانید اینجا را ببینید.
تفاوت با border
- outline برخلاف border، فضایی اشغال نمی‌کند
- امکان تنظیم radius برای outline وجود ندارد
- outline-offset فقط روی outline اثر می‌گذارد نه border
توجه: در برخی مرورگرهای قدیمی ممکن است از outline-offset پشتیبانی نشود. همیشه compatibility را بررسی کنید.
