آموزش رنگ خط بیرونیCSS

تعریف outline-color

ویژگی outline-color در CSS برای تعیین رنگ خط بیرونی (Outline) استفاده می‌شود.

روش‌های تعیین رنگ عبارت‌اند از:

• نام رنگ → مانند "red"
• HEX → مقدار هگزادسیمال، مانند #ff0000
• RGB → مقدار RGB، مانند rgb(255,0,0)
• HSL → مقدار HSL، مانند hsl(0, 100%, 50%)
• invert → معکوس کردن رنگ (برای اطمینان از دیده شدن خط بیرونی در هر پس‌زمینه‌ای)

مثال: انواع outline-color

در مثال زیر، چند پاراگراف با رنگ‌های مختلف خط بیرونی نمایش داده می‌شوند. توجه کنید که هر عنصر یک border سیاه نازک نیز دارد:

p {
  border: 1px solid black;
  padding: 5px;
}

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;
}

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

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

استفاده از HSL برای رنگ Outline

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

نکته آموزشی

• مقدار invert بیشتر برای مواقعی کاربرد دارد که پس‌زمینه متغیر است و می‌خواهیم خط بیرونی همیشه قابل مشاهده باشد.
• برای یادگیری بیشتر درباره HEX، RGB و HSL می‌توان به فصل‌های مربوط به رنگ‌ها در CSS مراجعه کرد.