آموزش ویژگی کوتاه نویسی خط بیرونی در CSS

تعریف outline (Shorthand)

ویژگی outline یک ویژگی کوتاه‌نویسی (shorthand property) در CSS است که برای تنظیم همزمان ویژگی‌های زیر استفاده می‌شود:

• outline-width → ضخامت خط بیرونی
• outline-style → سبک خط بیرونی (اجباری)
• outline-color → رنگ خط بیرونی

 نکته: می‌توانید یک، دو یا سه مقدار از لیست بالا را مشخص کنید. ترتیب نوشتن مقادیر اهمیتی ندارد.

مثال: استفاده از outline به صورت shorthand

در مثال زیر، چند نوع خط بیرونی با استفاده از ویژگی کوتاه‌نویسی outline تعریف شده‌اند:

p.ex1 {
  outline: dashed;
}

p.ex2 {
  outline: dotted red;
}

p.ex3 {
  outline: 7px solid yellow;
}

p.ex4 {
  outline: thick ridge pink;
}

خط بیرونی (Outline) می‌تواند گوشه‌های گرد داشته باشد.
برای این کار از ویژگی border-radius استفاده می‌کنیم که گوشه‌های عنصر را گرد می‌کند.

مثال: Outline با گوشه‌های گرد

p.ex1 {
  outline: dashed;
  border-radius: 8px;
}

p.ex2 {
  outline: dotted red;
  border-radius: 5px;
}

p.ex3 {
  outline: 7px solid yellow;
  border-radius: 5px;
}

p.ex4 {
  outline: thick ridge pink;
  border-radius: 8px;
}

p.ex5 {
  outline: thick solid green;
  border-radius: 10px;
}

• ویژگی outline راهی سریع برای تعریف رنگ، ضخامت و سبک خط بیرونی در یک خط است.
• ترکیب آن با border-radius باعث می‌شود عناصر ظاهری زیباتر و مدرن‌تر داشته باشند.