outline در سی اس اس

outline در سی اس اس خطی است که در اطراف المان، بیرون از border کشیده می شود. به شکل زیر توجه کنید:

در css خصوصیت های زیر برای outline وجود دارد:

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

نکته: outline با border تفاوت هایی دارد؛ outline بیرون از border رسم می شود و ممکن است با سایر المان های کنار خود همپوشانی داشته باشد، همچنین عرض و ارتفاع outline تآثیری در عرض و ارتفاع کلی المان ندارد.

نکته: همه خصوصیاتی که برای outline در سی اس اس تعریف می شوند، فقط در صورتی اعمال می شوند که outline-style تعیین شده باشد.

Outline Style

استایل المان را مشخص می کند و می تواند مقادیر زیر را بگیرد:

• dotted: این استایل نقطه نقطه ای می باشد.
• dashed: این استایل از خط های تیره تشکیل شده است.
• solid: این استایل خط پیوسته می باشد.
• double: این استایل دو خط ممتد می باشد.
• groove: نوعی outline سه بعدی است.
• ridge: نوعی outline سه بعدی است.
• inset: نوعی outline سه بعدی است.
• outset: نوعی outline سه بعدی است.
• none: هیچ گونه outline نداریم.
• hidden: این استایل بیانگر outline پنهان است.

p {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 Color

برای رنگ دادن به outline در سی اس اس از این خصوصیت استفاده می کنیم و رنگ آن به روش های زیر تعیین می شود:

• استفاده از نام رنگ مانند: قرمز
• استفاده از روش HEX مانند: ff0000 #
• استفاده از روش RGB مانند: (rgb(255,0,0
• استفاده از روش invert: از معکوس سازی رنگ استفاده می کند و این اطمینان را می دهد که outline دیده می شود (بدون در نظر گرفتن رنگ background)

در مثال های زیر رنگ های مختلف outline در css را مشاهده می کنید. البته در همه این ها، border نازکی با رنگ مشکی مشاهده می کنید:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}
p.ex2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}
p.ex3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}

در مثال زیر از outline-color: invert استفاده شده است که این اطمینان را می دهد که outline دیده می شود:

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Outline Width

outline-width عرض outline در سی اس اس را تعیین می کند که می تواند مقادیر زیر را بگیرد:

• thin: معمولا ۱px
• medium: معمولا ۳px
• thick: معمولا ۵px
• مقادیری با واحدهای px, pt, cm و em

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}
p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}
p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

خلاصه نویسی ویژگی های outline در سی اس اس

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

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

outline می تواند شامل یک، دو یا هر سه موارد بالا باشد و ترتیب موارد بالا اهمیتی ندارد.

به مثال زیر دقت کنید:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

Outline Offset

ویژگی outline-offset فاصله ای بین outline و حاشیه (یا border) المان ایجاد می کند که این فاصله به صورت transparent (شفاف) می باشد.
در مثال زیر فاصله ای به اندازه ۱۵px در اطراف المان می بینید:

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

مثال زیر نشان می دهد که فاصله بین المان و outline آن شفاف است:

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

برگرفته از وب سایت w3schools