ضخامت خط پیرامونی (Outline Width) در CSS
در CSS، ویژگی «ضخامت خط پیرامونی (Outline Width)» با outline-width مقدار پهنای خط پیرامونی را تعیین می کند. این خط بیرون از کادر عنصر رسم می شود و برای برجسته سازی به کار می رود.
ضخامت خط پیرامونی چیست؟
طبق مستند، outline-width می تواند مقادیر از پیش تعریف شده یا طول مشخص داشته باشد. همچنین، ابتدا باید سبک خط با outline-style تعیین شود تا ضخامت اثر کند.
thin— معمولاً 1pxmedium— معمولاً 3pxthick— معمولاً 5px- یک طول مشخص مانند px، pt، cm، em و …
نکته: خط پیرامونی با کادر متفاوت است و خارج از کادر رسم می شود؛ همچنین در ابعاد واقعی عنصر محاسبه نمی شود. درباره خط پیرامونی بیشتر در صفحه Outline بخوانید.
نمونه های outline-width
در نمونه زیر، چهار حالتِ ضخامت خط پیرامونی نمایش داده شده است. برای اعمال ضخامت، ابتدا سبک و رنگ خط را تعیین کرده ایم.
p { padding: 5px; outline-style: solid; outline-color: green; } p.ex1 { outline-width: thin; } p.ex2 { outline-width: medium; } p.ex3 { outline-width: thick; } p.ex4 { outline-width: 8px; }استفاده از طول های مشخص
می توانید مقدار ضخامت را با واحدهای طولی مشخص کنید؛ مثلاً پیکسل.
.card { outline-style: solid; outline-color: green; outline-width: 8px; }برای مرور تفاوت ها و نقش فضای اطراف محتوا، به مدل جعبه ای مراجعه کنید: مدل جعبه ای (Box Model).
ترکیب با سایر ویژگی های Outline
ویژگی های خط پیرامونی شامل outline-style، outline-color، outline-width، outline-offset و میان بُر outline است. برای رنگ ها، صفحه Outline Color را ببینید. اگر نیاز دارید درباره «ضخامت خط پیرامونی» بیشتر بدانید، مسیر یادگیری Outline را دنبال کنید.