رنگ پیرامون CSS

رنگ پیرامون CSS

outline-color این属性 برای تنظیم رنگ حاشیه استفاده می‌شود.

می‌توانید از طریق روش‌های زیر رنگ را تنظیم کنید:

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

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

حاشیه برجسته قرمز، خط‌های مستقیم.

حاشیه برجسته آبی، نقاط.

حاشیه برجسته خاکستری.

مثال

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

شما همچنین می‌توانید از مقادیر شانزده‌ساعته (HEX) برای تعیین رنگ حاشیه استفاده کنید:

مثال

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* قرمز */
}

آزمایش کنید

مقادیر RGB

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

مثال

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

آزمایش کنید

مقادیر HSL

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

مثال

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

آزمایش کنید

شما می‌توانید در رنگ‌های CSS در این فصل بیشتر درباره مقادیر HEX، RGB و HSL یاد خواهید گرفت.

رنگ معکوس استفاده شده است

در این مثال از outline-color: invert، عملکرد رنگ معکوس را انجام داد. این کار باعث می‌شود که خط‌ها در هر رنگ پس‌زمینه‌ای قابل مشاهده باشند:

نقش خط‌های خطی رنگی معکوس.

مثال

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

آزمایش کنید