سلام! امروز می‌خواهیم در مورد CSS outline صحبت کنیم. برای کسانی که تازه با CSS آشنا شده‌اند، ممکن است تفاوت بین border و outline کمی گیج‌کننده باشد. اما نگران نباشید! قصد داریم به طور کامل این موضوع را بررسی کنیم تا بتوانید به خوبی از آن استفاده کنید.
اول از همه، بیایید ببینیم outline چیست. Outline یک خط است که دور یک عنصر کشیده می‌شود، اما برخلاف border، فضایی از عنصر نمی‌گیرد. این ویژگی مفید است وقتی شما می‌خواهید تمرکز کاربر را به عنصر خاصی جلب کنید بدون آنکه طرح کلی عناصر صفحه را تغییر دهید.
Outline می‌تواند رنگ، سبک (مانند نقطه‌چین، خط‌چین، خط صاف) و ضخامت را داشته باشد. برای تنظیم همه این‌ها به طور هم‌زمان، می‌توانید از خاصیت outline استفاده کنید.
حالا بیایید نگاهی به نحوه استفاده از outline در CSS بیندازیم. برای مثال، فرض کنید شما یک دکمه دارید که می‌خواهید در صورت فوکوس، یک خط دور آن قرار بگیرد.
button:focus {
outline: 3px solid red;
}
خب، حالا بیایید مرحله به مرحله بررسی کنیم که این کد چه کار می‌کند.
button:focus
این کد CSS می‌گوید هنگامی که دکمه در حالت فوکوس قرار گرفت، استایل‌های داخل براکت‌ها اعمال شوند.
outline: 3px solid red;
این خط از کد، یک outline به ضخامت ۳ پیکسل، با رنگ قرمز و سبک solid به دکمه اضافه می‌کند.