رنگ حاشیه بیرونی (Outline Color)
«رنگ حاشیه بیرونی (Outline Color)» رنگ خط بیرونی عنصر است. «Outline» بیرون «Border» قرار می گیرد و اندازه جعبه را عوض نمی کند.
تعریف رنگ حاشیه بیرونی
ویژگی «outline-color» رنگ Outline را تعیین می کند. می توانی نام رنگ، HEX، RGB، یا HSL بدهی. «invert» هم برای وارونه سازی رنگ است تا همیشه دیده شود.
مثال: رنگ های مختلف با outline-color
<style>
p {
border: 1px solid black;
padding: 6px;
margin: 6px 0;
}
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
outline-style: outset;
outline-color: green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
}
</style>
<p class="ex1">Solid red outline</p>
<p class="ex2">Dotted blue outline</p>
<p class="ex3">Outset green outline</p>
<p class="ex4">Solid invert outline</p>
نکته: بدون «outline-style»، رنگ و عرض اثری ندارند.
HEX: تعیین رنگ با کد شانزده ای
<style>
p.hex {
outline-style: solid;
outline-color: #ff0000;
}
</style>
<p class="hex">HEX red outline</p>
RGB: مقداردهی با قرمز، سبز، آبی
<style>
p.rgb {
outline-style: solid;
outline-color: rgb(255, 0, 0);
}
</style>
<p class="rgb">RGB red outline</p>
HSL: ته مایه، اشباع، روشنایی
<style>
p.hsl {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
}
</style>
<p class="hsl">HSL red outline</p>
گام های عملی
- اول «outline-style» را مقدار بده.
- سپس «outline-color» را با فرمت دلخواه تنظیم کن.
- در صورت نیاز، «outline-width» را دقیق مشخص کن.
پیشنهاد مطالعه: رنگ حاشیه بیرونی، همچنین حاشیه بیرونی و عرض حاشیه بیرونی.
جمع بندی سریع
- Outline بیرون Border قرار می گیرد.
- «outline-color» با نام، HEX، RGB، یا HSL است.
- «invert» همیشه دید را تضمین می کند.
- بدون «outline-style»، رنگ اعمال نمی شود.