رنگ حاشیه (Border Color)
«رنگ حاشیه (Border Color)» رنگ قاب دور المان است. این رنگ از ویژگی «border-color» می آید. همچنین می توانی نام رنگ، HEX، RGB، یا HSL بدهی. بنابراین نتیجه دقیقاً مطابق طرح می شود.
تعریف ساده border-color
ویژگی «border-color» رنگ چهار طرف حاشیه را تنظیم می کند. اما اگر مقدار ندهی، رنگ از «color» خود المان ارث می گیرد. پس بهتر است رنگ را شفاف مشخص کنی.
نمونه: رنگ های مختلف با نام ها
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
<p class="one">Red border</p>
<p class="two">Green border</p>
<p class="three">Blue border</p>
رنگ های متفاوت برای هر طرف
می توانی یک تا چهار مقدار بدهی. با چهار مقدار، ترتیب بالا، راست، پایین، چپ است. بنابراین کنترل کامل داری.
نمونه: چهار رنگ برای چهار ضلع
<style>
p.box {
border-style: solid;
border-color: red green blue yellow;
}
</style>
<p class="box">Top red, right green, bottom blue, left yellow</p>
تنظیم رنگ با HEX، RGB، HSL
برای دقت بیشتر، از HEX، RGB، یا HSL استفاده کن. زیرا این فُرم ها دقیق و قابل تکرار هستند.
نمونه: HEX
<style>
p.hex {
border-style: solid;
border-color: #ff0000;
}
</style>
<p class="hex">HEX red border</p>
نمونه: RGB
<style>
p.rgb {
border-style: solid;
border-color: rgb(255, 0, 0);
}
</style>
<p class="rgb">RGB red border</p>
نمونه: HSL
<style>
p.hsl {
border-style: solid;
border-color: hsl(0, 100%, 50%);
}
</style>
<p class="hsl">HSL red border</p>
گام های عملی انتخاب رنگ حاشیه
- اول «border-style» مناسب را تنظیم کن.
- بعد «رنگ حاشیه (Border Color)» را تعیین کن.
- در صورت نیاز، برای هر طرف رنگ جدا بده.
نکته: اگر «border-color» تنظیم نشود، معمولاً از رنگ متن ارث می گیرد. بنابراین نتیجه شاید ناخواسته شود.
مطالب مرتبط: حاشیه ها، عرض حاشیه، گرد کردن گوشه ها. همچنین از عبارت رنگ حاشیه برای لینک سازی داخلی استفاده کن.
جمع بندی سریع
- اول سبک حاشیه را تنظیم کن.
- رنگ را با نام، HEX، RGB، یا HSL بده.
- چهار مقدار یعنی چهار ضلع متفاوت.
- بدون رنگ، احتمال ارث بری وجود دارد.