CSS – خط‌چین (Outline)

CSS - خط‌چین (Outline)

خط‌چین (Outline) یک خط است که بیرون از حاشیه عنصر کشیده می‌شود.

این عنصر دارای یک حاشیه سیاه و یک خط‌چین سبز با عرض ۱۰ پیکسل است.

خط‌چین در CSS

خط‌چین یک خط است که دور عناصر کشیده می‌شود، بیرون از حاشیه‌ها، تا عنصر “برجسته” شود.

CSS شامل ویژگی‌های زیر برای خط‌چین است:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

توجه:

خط‌چین با حاشیه‌ها متفاوت است! بر خلاف حاشیه، خط‌چین خارج از مرز عنصر کشیده می‌شود و ممکن است با محتوای دیگر هم‌پوشانی داشته باشد. همچنین، خط‌چین بخشی از ابعاد عنصر نیست؛ یعنی عرض و ارتفاع کل عنصر تحت تأثیر عرض خط‌چین قرار نمی‌گیرد.

استایل خط‌چین در CSS

ویژگی outline-style نوع استایل خط‌چین را مشخص می‌کند و می‌تواند یکی از مقادیر زیر را داشته باشد:

  • dotted: خط‌چین نقطه‌چین
  • dashed: خط‌چین خط‌چین
  • solid: خط‌چین خطی
  • double: خط‌چین دو خطی
  • groove: خط‌چین سه‌بعدی شیار
  • ridge: خط‌چین سه‌بعدی لبه‌دار
  • inset: خط‌چین سه‌بعدی تورفته
  • outset: خط‌چین سه‌بعدی برجسته
  • none: بدون خط‌چین
  • hidden: خط‌چین پنهان

مثال:

تست انواع مختلف خط‌چین‌ها:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

نتیجه:

  • یک خط‌چین نقطه‌چین
  • یک خط‌چین خط‌چین
  • یک خط‌چین خطی
  • یک خط‌چین دو خطی
  • یک خط‌چین شیار
  • یک خط‌چین لبه‌دار
  • یک خط‌چین تورفته
  • یک خط‌چین برجسته

توجه:

هیچ‌کدام از ویژگی‌های دیگر خط‌چین (که در فصل‌های بعدی خواهید آموخت) تأثیری نخواهند داشت مگر اینکه ویژگی outline-style تنظیم شده باشد!

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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