تعریف Outline
در CSS، Outline یا خط بیرونی، خطی است که دور یک عنصر کشیده میشود اما خارج از مرز (border) آن عنصر قرار دارد.
به عنوان مثال، یک عنصر میتواند دارای یک border سیاه و یک outline سبز با ضخامت ۱۰px باشد.
تفاوت Outline با Border
- Outline همیشه بیرون از مرز عنصر رسم میشود.
- ممکن است روی محتوای دیگر قرار بگیرد.
- Outline جزو ابعاد عنصر محسوب نمیشود؛ یعنی عرض و ارتفاع کل عنصر تحت تأثیر ضخامت outline قرار نمیگیرد.
- در مقابل، Border بخشی از ابعاد عنصر است.
ویژگیهای Outline در CSS
CSS چند ویژگی برای کنترل outline دارد:
- outline-style → تعیین سبک خط بیرونی
- outline-color → تعیین رنگ خط بیرونی
- outline-width → تعیین ضخامت خط بیرونی
- outline-offset → ایجاد فاصله بین خط بیرونی و مرز عنصر
- outline → ویژگی کوتاهنویسی (shorthand) برای همه موارد بالا
ویژگی outline-style
ویژگی outline-style سبک خط بیرونی را مشخص میکند و میتواند یکی از مقادیر زیر باشد:
dotted→ خط نقطهایdashed→ خط خطچینsolid→ خط یکدستdouble→ خط دوتاییgroove→ خط سهبعدی شیاردارridge→ خط سهبعدی برجستهinset→ خط سهبعدی فرورفتهoutset→ خط سهبعدی بیرونزدهnone→ بدون خط بیرونیhidden→ خط بیرونی مخفی
مثال: نمایش انواع outline-style
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;
}
- خط نقطهای (dotted)
- خط خطچین (dashed)
- خط یکدست (solid)
- خط دوتایی (double)
- خط شیاردار سهبعدی (groove) → وابسته به رنگ outline
- خط برجسته سهبعدی (ridge) → وابسته به رنگ outline
- خط فرورفته سهبعدی (inset) → وابسته به رنگ outline
- خط بیرونزده سهبعدی (outset) → وابسته به رنگ outline