تنظیم عرض خط outline در CSS
در طراحی وب، outline یکی از ویژگی‌های مهم برای بهبود دسترسی و تجربه کاربری است. برخلاف border که بر روی layout تأثیر می‌گذارد، outline خارج از عنصر نمایش داده می‌شود و فضای اضافی اشغال نمی‌کند.
نکته: outline معمولاً برای نشان دادن فوکوس روی عناصر تعاملی مانند لینک‌ها و inputها استفاده می‌شود.
ویژگی outline-width
برای تنظیم عرض outline می‌توانید از خاصیت outline-width استفاده کنید. این ویژگی مقادیر مختلفی می‌پذیرد:
- مقادیر عددی: مانند 2px، 0.5em
- کلمات کلیدی: thin (نازک)، medium (متوسط)، thick (ضخیم)
| مقدار |
توضیح |
| thin |
معمولاً معادل 1px |
| medium |
معمولاً معادل 3px |
| thick |
معمولاً معادل 5px |
مثال‌های کاربردی
در اینجا چند نمونه کد برای تنظیم outline-width مشاهده می‌کنید:
مثال 1: تنظیم outline نازک برای دکمه‌ها
button { outline-width: thin; }
مثال 2: outline ضخیم برای عناصر فوکوس شده
input:focus { outline-width: thick; }
برای اطلاعات بیشتر درباره تنظیمات outline می‌توانید اینجا را چک کنید.
تفاوت outline و border
اگرچه outline و border ظاهر مشابهی دارند، اما تفاوت‌های مهمی بین آنها وجود دارد:
- outline بر روی layout تأثیر نمی‌گذارد (فضای اضافی اشغال نمی‌کند)
- outline نمی‌تواند گرد شود (border-radius روی آن اثر ندارد)
- outline در تمام جهات یکسان است (نمی‌توان برای هر طرف مقدار جداگانه تعریف کرد)
در طراحی واکنش‌گرا، تنظیم مناسب outline-width به ویژه برای کاربرانی که از صفحه‌کلید استفاده می‌کنند حیاتی است. مقدار پیشنهادی برای دسترسی بهتر، حداقل 2px است.
