آموزش ویژگی outline-color در CSS

از ویژگی outline-color برای تنظیم رنگ outline استفاده می شود.

این رنگ، می تواند به روش زیر تنظیم شود:

1. نام رنگ : برای مشخص کردن رنگ، می توانیم از یک نام رنگ، مانند red (قرمز) استفاده کنیم.
2. HEX : برای مشخص کردن رنگ، می توانیم از یک مقدار هگزادسیمال مانند #ff0000 استفاده کنیم.
3. RGB : برای مشخص کردن رنگ، می توانیم از یک مقدار RGB مانند rgb(255,0,0) استفاده کنیم.
4. HSL : برای مشخص کردن رنگ، می توانیم از یک مقدار HSL مانند hsl(0, 100%, 50%) استفاده کنیم.
5. invert : این مقدار، رنگ outline را معکوس رنگ پس زمینه(background color) قرار می دهد که باعث می شود outline همواره قابل مشاهده باشد.

مثال زیر چند outline مختلف که رنگ های متفاوتی دارند را نشان می دهد. همچنین توجه کنید که این عناصر، حاوی یک کادر سیاه(black border) که درون یک outline قرار دارد هستند:

یک outline قرمز solid

یک outline آبی dotted

یک outline خاکستری outset

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

استفاده از مقادیر هگزادسیمال یا HEX

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

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

مقادیر RGB

ما می توانیم رنگ outline را با استفاده از یک  مقدار RGB مشخص کنیم:

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

مقادیر HSL

ما می توانیم رنگ outline را با استفاده از یک مقدار HSL مشخص کنیم:

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

نکته: برای اطلاعات بیشتر در مورد رنگ های RGB و HEX و HSL، می توانید به این مقاله، و مقالات بعد از آن مراجعه کنید.