Outline در زبان CSS به خطی گفته می شود که دور تا دور عنصر (البته خارج از هر نوع مرزی مانند حاشیه هایش) کشیده می شود تا عنصر مورد نظر از نظر ظاهری جلب توجه کند. به تصویر زیر نگاه کنید:
تصویر شماره 1 – جایگاه outline نسبت به حاشیه ها و margin ها و …
نکته ی مهم این تصویر آن است که شما متوجه شوید outline ها کاملا بیرون از مرز ها و حاشیه های یک عنصر قرار می گیرند.
زبان CSS برای کار با outline ها دارای دستورات زیر است:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
سوال: با این توصیفات تفاوت outline و border چیست؟
پاسخ: تفاوت outline و border هر چند جزئی است اما مهم است. حاشیه و outline از دو جهت اصلی با هم تفاوت دارند:
- outline ها خارج از border های یک عنصر کشیده می شوند و ممکن است با عناصر خارجی دیگر تداخل داشته باشند و روی آن ها قرار بگیرند اما در border ها چنین مسئله ای صحیح نیست.
- outline به هیچ عنوان جزو ابعاد (طول و عرض) یک عنصر حساب نمی شود و برخلاف border ها با تغییر دادن outline اندازه ی کلی عنصر ما تغییری نمی کند.
خصوصیت outline-style
خصوصیت outline-style استایل و ظاهر outline را مشخص کرده و می تواند مقادیر زیر را بگیرد:
dottedاین گزینه outline را به صورت نقطه چین نمایش می دهدdashedاین گزینه outline را به صورت خط چین نمایش می دهدsolidاین گزینه outline را به صورت عادی و خط صاف نمایش می دهدdoubleاین گزینه outline را دو خطی می کندgrooveسعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع شیاری) بدهدridgeسعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع لبه دار) بدهدinsetسعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع فرو رفته) بدهدoutsetسعی می کند به کمک رنگ بندی outline، به آن حالت 3 بعدی (از نوع برآمده) بدهدnoneعنصر را بدون outline می کندhiddenاین گزینه outline را نامرئی می کند
بیایید این موارد را در قالب یک مثال ببینیم: