رنگ

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial‏ | Borders(تغییرمسیر از CSS:کادرها/رنگ)
پرش به ناوبری پرش به جستجو

ویژگی border-color برای تنظیم رنگ چهار ضلع کادر استفاده می‌شود.[۱]

رنگ را می‌توان بوسیله موارد زیر تنظیم کرد:

  • نام - نام رنگ را مشخص می‌کند، مانند "red"
  • HEX - یک مقدار هگزادسیمال را مشخص می‌کند، مانند "#ff0000"
  • RGB - یک مقدار RGB را مشخص می‌کند، مانند "rgb(255,0,0)"
  • HSL - یک مقدار HSL را مشخص می‌کند، مانند "hsl(0, 100%, 50%)"
  • کاملا شفاف

نکته: اگر 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; /* red top, green right, blue bottom and yellow left */
}


مقادیر HEX

با استفاده از مقدار هگزادسیمال (HEX) نیز می‌توان رنگ کادر را مشخص کرد:

مثال

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}


مقادیر RGB

یا با استفاده از مقادیر RGB:

مثال

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}


مقادیر HSL

می‌توانید از مقادیر HSL نیز استفاده کنید:

مثال

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}


نکته: در بخش‌های رنگ‌های CSS می‌توانید اطلاعات بیشتری در مورد مقادیر HEX ,RGB و HSL کسب کنید.


منابع آموزشی