عرض حاشیه بیرونی (Outline Width)
«عرض حاشیه بیرونی (Outline Width)» یعنی ضخامت خطِ دورِ عنصر. «Outline» بیرونِ «Border» است و اندازه جعبه را تغییر نمی دهد؛ فقط دیده شدن را بیشتر می کند.
ویژگی outline-width چیست؟
ویژگی «outline-width» ضخامت Outline را تعیین می کند. می تواند «thin»، «medium»، «thick» یا عدد دلخواه باشد. واحد عدد می تواند px، em و… باشد.
نمونه: ضخامت های مختلف Outline
<style>
p {
padding: 5px;
outline-style: solid;
outline-color: green;
margin: 6px 0;
}
p.ex1 {
outline-width: thin;
}
p.ex2 {
outline-width: medium;
}
p.ex3 {
outline-width: thick;
}
p.ex4 {
outline-width: 8px;
}
</style>
<p class="ex1">Thin outline</p>
<p class="ex2">Medium outline</p>
<p class="ex3">Thick outline</p>
<p class="ex4">8px outline</p>
نکته: تا «outline-style» تنظیم نشود، «outline-width» و رنگ اثری ندارند.
گام های عملی تنظیم عرض
- اول «outline-style» را مقدار بده.
- حالا «outline-width» را انتخاب کن.
- در صورت نیاز، رنگ را با «outline-color» مشخص کن.
پیشنهاد مطالعه: عرض حاشیه بیرونی، همچنین حاشیه بیرونی و رنگ حاشیه بیرونی.
جمع بندی سریع
- Outline بیرونِ Border قرار می گیرد.
- «outline-width» ضخامت آن را می سازد.
- بدون «outline-style» خروجی نداری.
- می توانی از px یا مقادیر آماده استفاده کنی.