حاشیه بیرونی (Outline)
حاشیه بیرونی (Outline) خطی بیرونِ قاب عنصر است. با «Outline» عنصر بیشتر به چشم می آید. برعکس «حاشیه (Border)»، جزو اندازه جعبه نیست و اندازه کل را تغییر نمی دهد.
Outline چیست و چه فرقی با Border دارد؟
Outline بیرونِ Border رسم می شود. بنابراین، ممکن است روی محتواهای اطراف بیفتد. همچنین، عرض Outline به عرض و ارتفاع عنصر اضافه نمی شود.
نمونه: تفاوت Border و Outline
<style>
.box {
width: 200px;
border: 2px solid black;
outline: 10px solid #04AA6D;
padding: 16px;
margin: 12px auto;
text-align: center;
}
</style>
<div class="box">
Element with border and outline
</div>
نکته: Outline برای دسترس پذیری عالی است؛ مثلا وقتی یک دکمه فوکوس می گیرد، با Outline مشخص می شود.
استایل های Outline
ویژگی «outline-style» نوع خط را مشخص می کند؛ مثل نقطه چین، خط چین، یکپارچه، و غیره.
نمونه: outline-style
<style>
p.demo {
outline-color: green;
padding: 6px;
margin: 6px 0;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
</style>
<p class="demo dotted">Dotted outline</p>
<p class="demo dashed">Dashed outline</p>
<p class="demo solid">Solid outline</p>
نکته: سایر ویژگی های Outline، بدون تعیین «outline-style»، اثری ندارند.
گام های عملی
- اول «outline-style» را تنظیم کن.
- بعد «outline-color» و «outline-width» را بده.
- اگر فاصله خواستی، «outline-offset» را زیاد کن.
برای مطالعه بیشتر: حاشیه بیرونی، همچنین حاشیه ها و حاشیه های گرد را ببین.
جمع بندی سریع
- Outline بیرونِ Border رسم می شود.
- اندازه جعبه را تغییر نمی دهد.
- برای فوکوس و دسترسی عالی است.
- بدون outline-style، بقیه بی اثرند.