CSS

CSS Outline Offset
الفارق بين outline و border في لغة CSS

ستتعلم في هذا الدرس عمل مساحات داخلية بين outline وبين border داخل حدود العنصر  والتحكم في حجم هذة المساحات في لغة CSS.

التاريخ

14 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1708

المواضيع

24
الشروحات chevron_left CSS Outline Offset chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Outline Offset
الفارق بين outline و border في لغة CSS

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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.
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات