خط پیرامونی در CSS (Outline)

«خط پیرامونی (Outline)» خطی است که بیرونِ کادر عنصر رسم می شود و کمک می کند عنصر روی صفحه برجسته تر دیده شود. با خط پیرامونی می توانید بدون تغییر ابعاد جعبه، تمرکز بصری ایجاد کنید.

تعریف خط پیرامونی

خط پیرامونی بیرونِ کادر قرار می گیرد و حتی می تواند روی محتوای اطراف هم بیفتد. برخلاف کادر، خط پیرامونی بخشی از ابعاد عنصر نیست و اندازه کلی جعبه را تغییر نمی دهد.

نکته: عرض و ارتفاع عنصر با خط پیرامونی تغییر نمی کند؛ بنابراین برای هایلایت کردن بدون جابجایی چیدمان، از خط پیرامونی استفاده کنید.

خواص مرتبط با خط پیرامونی

• outline-style — تعیین سبک خط
• outline-color — تعیین رنگ خط
• outline-width — تعیین ضخامت خط
• outline-offset — فاصله خط از لبه یا کادر
• outline — کوتاه نویسی همه موارد بالا

نمونه: سبک های مختلف خط پیرامونی

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; }

برای اثر سه بعدی در مقادیر groove، ridge، inset و outset نتیجه به outline-color وابسته است.

کوتاه نویسی خط پیرامونی

button:focus { outline: 3px solid #04AA6D; }

در کوتاه نویسی ترتیب رایج ضخامت، سبک، رنگ است. همچنین می توانید برای دسترس پذیری روی حالت فوکوس عناصر تعاملی از خط پیرامونی استفاده کنید.

فاصله گذاری با outline-offset

.card { border: 2px solid #000; outline: 4px solid #0a0; outline-offset: 6px; }

ویژگی outline-offset فاصله ای بین کادر و خط پیرامونی ایجاد می کند تا هایلایت تمیزتری داشته باشید.

هشدار: دیگر خواص خط پیرامونی بدون تعیین outline-style اثری نخواهند داشت.

مطالعه بیشتر و بخش های مرتبط

برای درک بهتر جایگاه خط پیرامونی در «مدل جعبه ای» و تعامل آن با لایه (Padding) و کادر، منابع زیر را ببینید: راهنمای MDN: outline و مشخصات W3C: CSS UI Level 4.