مقدمه‌ای بر outline در CSS
در CSS، ویژگی outline یکی از ویژگی‌هایی است که استفاده از آن می‌تواند ظاهر عنصری را که می‌خواهیم دستکاری کنیم، بهتر نشان دهد. تفاوت اصلی میان outline و border در این است که outline خارج از چارچوب (باکس) عنصری تنظیم می‌شود و در تغییر اندازه عنصری تأثیرگذار نیست. در حالی که border بخشی از محتوای عنصر است و بر اندازه آن تأثیر می‌گذارد.
ویژگی outline معمولاً برای برجسته‌سازی عناصر و تمرکز بیشتر بر روی آن‌ها استفاده می‌شود. برخلاف border، مشخصات outline نمی‌تواند به صورت جزئی (مانند فقط تنظیم شدن برای بالا یا چپ) تعریف شود و تنها در کل عنصر اعمال می‌شود.
خصوصیات outline
ویژگی outline معمولاً با سه خصوصیت اصلی که ترکیب آن‌ها ایجاد می‌شود، معرفی می‌گردد: outline-style, outline-width, و outline-color. این خصوصیات به ترتیب نوع، ضخامت و رنگ outline را مشخص می‌کنند.
یکی دیگر از ویژگی‌های مفید outline، outline-offset است که فاصله‌ای را بین outline و باکس مدل عنصر ایجاد می‌کند و می‌تواند برای ایجاد جلوه‌های بصری مختلف استفاده شود. کاربرد این ویژگی به شما اجازه می‌دهد تا انتخاب‌هایی کوچک اما قابل توجه در ظاهر رابط کاربری خود اعمال کنید.
مثالی عملی
در اینجا مثالی آورده‌ام تا نشان دهد چطور می‌توانید از outline در CSS استفاده کنید:
<style>
.my-element {
outline: 2px dashed red;
outline-offset: 5px;
}
</style>
<div class="my-element">
این یک عنصر با outline است
</div>
توضیح خط به خط کد
<style> بخش CSS مربوط به طراحی ظاهر را مشخص می‌کند.
.my-element کلاس CSS است که برای عنصری که می‌خواهیم با outline اعمال کنیم، تعریف شده است.
outline: 2px dashed red; در اینجا outline به صورت یک خط ۲ پیکسل به رنگ قرمز و به شکل خط‌چین در نظر گرفته شده است.
outline-offset: 5px; فاصلهٔ ۵ پیکسل بین outline و باکس مدل عنصر تعریف شده.
</style> بخش پایانی تعریف CSS است.
<div class="my-element"> یک عنصر HTML تعریف شده که کلاس تعریف شده
.my-element را به آن اعمال می‌کند. متنی داخل
<div> برای نمایش به کاربر است.