CSS Outline Offset

-

هذه الخاصية تعمل على إضافة مسافة بين Outline والحواف والحدود edge/border ل element، حيث تكون هذه المسافة بين elements وال Outline شفافة

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  OutlineOffset وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        div{
            margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
        }
    </style>
<body>
   <div> outline تطبيق </div>            
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)


تم تطبيق قيمة offset تساوي 15px واذا تلاحظ الصورة بتشوف الفرق بين الاطار الأحمر والمحتوي