آموزش Outline در CSS

outline یک خط است که در بیرون از border ترسیم می شود.

CSS از ویژگی های outline زیر برخوردار است:

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

نکته: outline با border(کادرها) متفاوت است. outline در بیرون از کادر یا همان border قرار می گیرد و ممکن است با دیگر محتوا، همپوشانی(overlap) داشته باشد. همچنین outline بخشی از ابعاد عنصر محسوب نمی شود. عرض و ارتفاع کلی عنصر توسط ضخامت(width) outline تحت تاثیر قرار نمی گیرد.

بررسی ویژگی outline-style در CSS

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

1. dotted : یک outline نقطه نقطه ای را مشخص می کند.
2. dashed : یک outline خط فاصله ای را مشخص می کند.
3. solid : یک outline که دور آن یک خط بسته(solid) است را مشخص می کند.
4. double : یک outline که دور آن دو خط بسته قرار دارد را مشخص می کند.
5. groove : یک outline شیار دار سه بعدی را مشخص می کند.
6. ridge : یک outline سه بعدی برآمده را مشخص می کند.
7. inset : یک outline سه بعدی درونی را مشخص می کند.
8. outset : یک outline سه بعدی بیرونی را مشخص می کند.
9. none : هیچ outline را مشخص نمی کند.
10. hidden : یک outlineمخفی را مشخص می کند.

مثال زیر، مقادیر مقادیر مختلف 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;}

نکته: هیچ یک از دیگر ویژگی های outline هیچ تاثیری نخواهند داشت، مگر اینکه ویژگی outline-style تنظیم شود.