Outline در CSS

در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده می‌شود outline گفته می‌شود. توجه کنید که outline خارج از یک عنصر ایجاد می‌شود و درنتیجه جزئی از عنصر محسوب نمی‌شود.

ما می‌توانیم همانند حاشیه ی یک عنصر، استایل، رنگ و عرض یک عنصر را به دلخواه خود ایجاد کنیم. ابتدا می‌خواهیم نوع استایل آن را تعیین کنیم:

P{

outline-style: dotted ;

}

ما به پاراگراف خود ، outline به حالت نقطه چین داده ایم. حالا می‌توانیم به آن رنگ نارنجی بدهیم:

P{

outline-style: dotted ;

outline-color: orange;

}

به پاراگراف خود یک حاشیه می‌دهیم تا تفاوت outline و border را بهتر متوجه شویم.

P{

border: 1px solid green ;

outline-style: dotted ;

outline-color: orange;

}

و سپس می‌توانیم برای outline ضخامت تعیین کنیم:

P{

border: 1px solid green ;

outline-style: dotted ;

outline-color: orange;

outline-width: 4px ;

}

برای دستور ضخامت هم می‌توانیم از مقدار عددی مثل بالا استفاده کنیم و هم می‌توانیم از مقدار حرفی مانند  thick , medium  و یا thin استفاده کنیم.

نکته:

نکته مهمی‌که وجود دارد این است که ما می‌توانیم هر سه دستور مربوط به outline را در یک دستور خلاصه کنیم و جالب این است که ترتیب مقدار‌ها در آن مهم نیست. مثال بالا را می‌توانیم به شکل زیر بنویسیم:

P{

border: 1px solid green ;

outline: dotted  orange 4px ;

}

یادتان باشد که حتما باید استایل outline را تعیین کنیم تا دستور رنگ و ضخامت مربوط به آن نیز اجرا شود.

و نکته ی دیگر اینکه چون outline خارج از محدوده ی یک عنصر کشیده می‌شود ممکن است با عنصر‌های خارجی دیگر تداخل پیدا کند.

و نیز با تغییر دادن outlin‌ها تغییری در عرض عنصر ایجاد نمی‌شود چرا که outline جزئی از عنصر محسوب نمی‌شود.

موضوع پایانی اینکه ما می‌توانیم فاصله ای بین outline و border ایجاد کنیم. برای این کار باید از دستور زیر استفاده کنیم:

outline-offset :  px ;

و به آن هر مقدار عددی که می‌خواهیم بدهیم.