آفست خط پیرامونی (Outline Offset) در CSS
ویژگی «آفست خط پیرامونی (Outline Offset)» با خاصیت outline-offset فاصله ای شفاف بین خط پیرامونی و لبه یا مرز عنصر ایجاد می کند. بنابراین عنصر بهتر دیده می شود و هم پوشانی ها را مدیریت می کنید.
تعریف و کاربرد outline-offset
با outline-offset می توانید خط پیرامونی را بیرون یا داخلِ مرز عنصر جابه جا کنید. فاصله ایجادشده شفاف است و در ابعاد جعبه اثر ندارد.
p { margin: 30px; padding: 5px; border: 1px solid black; outline: 3px solid red; outline-offset: 15px; }نکته: برای مشاهده دیگر ویژگی های مرتبط به Outline و کوتاه نویسی در Outline Shorthand مراجعه کنید.
فضای شفاف بین مرز و خط پیرامونی
نمونه زیر نشان می دهد که فاصله بین مرز و خط پیرامونی شفاف می ماند.
p { margin: 30px; padding: 5px; background: yellow; border: 1px solid black; outline: 3px solid red; outline-offset: 15px; }آفست منفی: قرارگیری داخل مرز
با مقدار منفی، خط پیرامونی داخل مرز قرار می گیرد و نزدیک تر دیده می شود.
p { margin: 30px; padding: 5px; background: yellow; border: 1px solid black; outline: 3px solid red; outline-offset: -5px; }هشدار: ابتدا سبک خط پیرامونی را با outline-style تعیین کنید؛ در غیر این صورت، سایر ویژگی ها اثری ندارند. برای رنگ نیز می توانید صفحه Outline Color را ببینید.
اگر به تایپوگرافی می روید، پس از این مبحث می توانید بخش متن در CSS را مطالعه کنید.