در مطالب قبلی در مورد رابط کاربری در زبان CSS3 مقدمه ای را برای شما ارائه کردیم.در این آموزش قصد داریم تا تا دقیق تر به این موضوع بپردازیم و خواص موجود در این مبحث را برای شما تشریح و بررسی کنیم.خاصیتی که در زیر به بررسی آن می پردازیم  خاصیت outline-offset  است.

خاصیت outline-offset :

خاصیت outline-offset یک خط حاشبه را برای عنصر تعیین کرده و آن را به دور عنصر ایجاد می کند .

outline-offset و border دو تفاوت اصلی دارند :

  1. outline بر خلاف border ها ، فضا اشغال نمی کنند .
  2. outline برخلاف border ، می توانند اشکال غیر چهار ضلعی داشته باشند .

شکل کلی استفاده از این خاصیت به صورت زیر است :

;Syntax: outline-offset : length | inherit 

; outline-offset : 10px:مثال

توضیح هر یک از موارد syntax :

length:

به وسیله پارامتر length می توانید میزان فاصله outline از حاشیه عنصر را تعیین نمایید :
مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا ۱۰px.
استفاده از این پارامتر اجباری است .

inherit:
به معنای این است که مقدار آن از عنصر مادر parent به ارث می رود .

پشتیانی در مرورگر های مختلف :

اکثر مرورگر های مطرح به جز IE  صورت عادی از این خاصیت پشتیانی می کنند .