outline در CSS

صفت outline در CSS استايل ،‌رنگ و عرض خط خارج از عنصر را مشخص مي كند.
outline يك خط رسم شده به دور عنصر است (بيرون از border) تا عنصر برجسته شود.
چون خط خارجي از border جداست و از عنصر حساب نمي شود ،‌ بر روس عرض و ارتفاع كل عنصر تاثير نخواهد داشت.
 

استايل دهي به outline

صفت outline-style استايل خط خارجي را مشخص مي كند. اين صفت مي تواند يكي از مقادير زير را داشته باشد :

dotted - نقطه اي
dashed - خط بريده
solid - خط ممتد تكي
double - خط ممتد دوبل
groove - خط سه بعدي شياردار - نتيجه بستگي به مقدار رنگ دارد
ridge - خط سه بعدي لبه دار - نتيجه بستگي به مقدار رنگ دارد
inset - خط سه بعدي فروورفته -  نتيجه بستگي به مقدار رنگ دارد
outset - خط سه بعدي برآمده -  نتيجه بستگي به مقدار رنگ دارد
none - بدون خط حاشيه
hidden - خط حاشيه مخفي


در مثال زير ابتدا يك خط حاشيه نازك به همه عناصر p اضافه شده است ،‌سپس مقادير مختلف براي  outline-style نمايش داده شده است.

مثال :

p {
    border: 1px solid black;
    outline-color: red;
}

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-color استفاده مي كنيم.
اين رنگ مي تواند با مقادير زير تنظيم شود :

- نام رنگ
- مقدار RGB
- مقدار Hex
- invert : از مكانيزم برعكس كردن رنگ استفاده مي كند تا خط خارجي قابل مشاهده باشد. (صرف نظر از رنگ پس زمينه)

مثال :

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

ضخامت outline

براي تعيين ضخامت خط خارجي از صفت outline-width استفاده مي كنيم. ضخامت خط خارجي را مي توان با يك اندازه مشخص ( px , pt , cm , em و ...) تعيين كرد يا از 3 مقدار از قبل تعيين شده thin ،‌ medium يا thick استفاده كرد.

مثال :

p {border: 1px solid black;}

p.one {
    outline-style: double;
    outline-color: red;
    outline-width: thick;
}

p.two {
    outline-style: double;
    outline-color: green;
    outline-width: 3px;
}

خلاصه نويسي outline

امكان خلاصه نويسي براي اين صفت هم وجود دارد. براي اينكار با استفاده از صفت outline‌ مي توان يك در يك خط كد ،‌3 صفت زير را نيز تنظيم كرد :

outline-width
outline-style
outline-color

مثال :

p {
    border: 1px solid black;
    outline: 5px dotted red;
}