صفت outline-offset در css فاصله outline و border

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت outline-offset در زبان css توضیحاتی را ارائه نماییم.

ویژگی کاربردی outline-offset در زبان css و در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت outline-offset در css فاصله outline و border - سایت آموزی

معرفی و کاربرد ویژگی outline-offset در زبان طراحی سی اس اس

به کمک خاصیت outline-offset می توانیم فاصله بین خط بیرونی ( outline ) و border عنصر html را تعیین نماییم.

نکته مهم

همان طور که می دانیم به صورت پیش فرض فاصله ای کوچک و شفاف بین خط بیرونی و حاشیه عنصر HTML وجود دارد. اما از طریق خصوصیت outline-offset می توانیم بین outline و border در عناصر اچ تی ام ال فاصله دلخواهی مشخص کنیم.

مقادیر صفت کاربردی outline-offset در زبان طراحی سی اس اس

صفت outline-offset که در زبان طراحی CSS3 معرفی شده است، ۳ مقدار می پذیرد که عبارتند از:

  1. مقدار length ( مقدار طولی )
  2. مقدار initial
  3. مقدار inherit

صفت outline-offset در css فاصله outline و border

مقدار length ( مقدار طولی ) درون خاصیت outline-offset در زبان سی اس اس

اگر خاصیت outline-offset را برای یک عنصر html برابر با مقدار length ( مقدار طولی ) تعریف کنیم، یعنی می خواهیم فاصه ای را بین outline و border در عناصر اچ تی ام ال منظور نماییم.

[html] img{ outline-offset: invert; }[/html]

مقدار initial درون خاصیت outline-color در زبان سی اس اس

اگر خاصیت outline-color را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت outline-color در زبان سی اس اس

اگر خاصیت outline-color را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت outline-offset در css فاصله outline و border - سایت آموزی

بررسی خاصیت outline-color از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی outline-color در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت outline-color در زبان طراحی سی اس اس