CSS Outline Offset
الفارق بين outline و border في لغة CSS
ستتعلم في هذا الدرس عمل مساحات داخلية بين outline وبين border داخل حدود العنصر والتحكم في حجم هذة المساحات في لغة CSS.
التاريخ
14 نوفمبر 2021
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
1754
المواضيع
24
CSS Outline Offset
الفارق بين outline و border في لغة CSS
</>
CSS Outline Offset
الفارق بين outline و border في لغة CSS
تُستخدم خاصية outline-offset في إضافة مساحات فارغة بين outline وبين border لأي عنصر والمساحات التي بين outline وبين border شفافة.
قيم خاصية outline-offset في لغة CSS:
- length وهي تحديد المساحة بوحدات [px-em-rem-cm-%] والقيمة الأفتراضية هي 0.
outline-offset syntax
طريقة كتابة خاصية outline-offset في لغة CSS.
outline-offset:value;
outline-offset values
قيم خاصية outline-offset في لغة CSS.
outline-offset:length|initial|inherit;
</>
CSS outline offset property
خاصية outline-offset في لغة CSS
تًستخدم خاصية outline-offset في لغة CSS لعمل مساحات فارغة بين outline وبين border في لغة CSS والقيمة الأفتراضية هي 0.
CSS outline offset
خاصية outline-offset في لغة CSS
Result
جربها بنفسك chevron_right
يظهر الكود بهذا الشكل على المتصفح
CSS outline offset
خاصية outline-offset في لغة CSS
p { border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }
</>
CSS outline transparent offset
خاصية outline-offset تخلق مساحات شفافة في لغة CSS
المساحةبين outline وبين border هي مساحة شفافة ولا يمكن تغيير لونها في لغة CSS إلا في حالة واحده وهي أن يكون للعنصر الأب parent لون فسوف يكون لها نفس لون الأب.
CSS outline transparent offset
p { background:yellow; border: 1px solid black; outline: 1px solid red; outline-offset: 15px; }
مهم
ليظهر جانب outline الأيمن والجانب الأيسر يجب أستخدام خاصية margin ولكن يجب عليك عدم تخطي الدروس الحالية قم بتجربة ذلك مع درس margin.