CSS - رنگ حاشیه (Border Color)
ویژگی border-color برای تعیین رنگ چهار طرف حاشیه استفاده می‌شود.
رنگ می‌تواند به یکی از روش‌های زیر تعیین شود:
- نام رنگ: مانند “red”
- HEX: مانند “#ff0000”
- RGB: مانند “rgb(255, 0, 0)”
- HSL: مانند “hsl(0, 100%, 50%)”
- شفاف:
transparent
نکته: اگر
border-colorتنظیم نشده باشد، رنگ حاشیه از رنگ عنصر ارث می‌برد.
مثال‌ها:
نمایش رنگ‌های مختلف حاشیه:
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}نتیجه:
- حاشیه قرمز
- حاشیه سبز
- حاشیه آبی
رنگ‌های خاص برای هر طرف
ویژگی border-color می‌تواند یک تا چهار مقدار داشته باشد (برای حاشیه بالا، راست، پایین و چپ).
مثال:
p.one {
border-style: solid;
border-color: red green blue yellow; /* قرمز بالا، سبز راست، آبی پایین و زرد چپ */
}استفاده از مقادیر HEX
رنگ حاشیه می‌تواند با استفاده از مقادیر هگزادسیمال (HEX) مشخص شود:
مثال:
p.one {
border-style: solid;
border-color: #ff0000; /* قرمز */
}استفاده از مقادیر RGB
همچنین می‌توانید از مقادیر RGB استفاده کنید:
مثال:
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* قرمز */
}استفاده از مقادیر HSL
شما همچنین می‌توانید از مقادیر HSL استفاده کنید:
مثال:
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* قرمز */
}برای اطلاعات بیشتر در مورد مقادیر HEX، RGB و HSL، می‌توانید به فصل‌های مربوط به رنگ‌ها در CSS مراجعه کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام