یک Outline خطی است که اطراف یک عنصر رسم میشود (خارج از border برای آن عنصر). با این حال صفت Outline با صفت Border متفاوت است. Outline جز ابعاد یک عنصر محسوب نمیشود و مجموع طول و عرض یک عنصر با افزودن صفت Outline به آن تغییری نخواهد کرد.
در شکل زیر مکان صفت Outline در یک عنصر مشخص شده است :
استایل دهی برای صفت Outline
از صفت outline-style برای استایل دهی به یک Outline استفاده میشود.
صفت outline-style میتواند دارای یکی از مقادیر زیر باشد :
- dotted : یک outline با استایل نقطه ای
- dashed : یک outline با استایل خطوط فاصله
- solid : یک outline با استایل خط مستقیم
- double : یک outline با استایل دو خط مستقیم
- groove : یک outline سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت outline-color دارد
- ridge : یک outline سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
- inset : یک outline سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
- outset : یک outline سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت outline-color دارد.
- none : بدون outline
- hidden : یک outline پنهان
در نمونه مثال زیر ابتدا برای هر عنصر <p> یک border نازک مشکی در نظر گرفته میشود سپس از استایل های مختلف outline برای هر عنصر پاراگراف استفاده میشود :
} 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 با استایل خطوط فاصله.
یک outline با استایل خط مستقیم.
یک outline با استایل دو خط مستقیم.
یک outline سه بعدی با استایل grooved.
یک outline سه بعدی با استایل ridge.
یک outline سه بعدی با استایل inset.
یک outline سه بعدی با استایل outset.
نکته : بدون مقداردهی صفت outline-style هیچکدام از صفات border ایی که در ادامه فصل توضیح داده خواهد شد، تاثیری نخواهند داشت.
صفت outline-color
از صفت outline-color برای مقدار دهی رنگ یک outline استفاده میشود.
رنگ یک outline میتواند به وسیله ی یکی از مقادیر زیر مقدار دهی شود :
- نام - یک نام معتبر برای یک رنگ مانند "red"
- RGB - یک مقدار RGB - مانند "(rgb(255,0,0"
- HEX - یک مقدار هگزادسیمال - مانند "ff0000#"
} p
;border : 1px solid black
;outline-style : double
;outline-color : red
{
نتیجه به شکل زیر خواهد بود :
یک outline رنگی.
صفت outline-width
صفت outline-width پهنای یک outline را مشخص میکند. پهنای یک outline میتواند به وسیله ی اندازه های مشخص (پیکسل ، سانتیمتر و ...) تعیین شود و یا به وسیله یکی از سه مقدار از پیش تعریف شده مقدار دهی شود : 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 ضخیم.
یک outilne نازک.
Outline - صفت کوتاه شده
برای کوتاه نویسی در کد این امکان وجود دارد که تمام صفات ذکر شده برای outline را در یک صفت جمع کنیم. این صفات عبارت اند از :
- outline-width
- outline-style (اجباری)
- outline-color
} p
;border : 1px solid black
;outline : 5px dotted red
{
نتیجه به شکل زیر خواهد بود :
یک outline.
منبع:learnsource