CSS – رنگ خط‌چین (Outline Color)

CSS - رنگ خط‌چین (Outline Color)

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

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

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

مثال:

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

  • یک خط‌چین قرمز محکم
  • یک خط‌چین آبی نقطه‌چین
  • یک خط‌چین خاکستری با حالت 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:

رنگ خط‌چین همچنین می‌تواند با استفاده از مقدار هگزادسیمال (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%); /* قرمز */
}

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

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.