خاصية انزياح المخطط الخارجي
آخر تحديث: 2026-09-13
outline-offset خاصية انزياح المخطط الخارجي
تتحكم الخاصية outline-offset في المسافة بين المخطط الخارجي (outline) وحافة الحدود (border) الخاصة بالعنصر. فالقيمة الموجبة تدفع المخطط الخارجي إلى الخارج بعيدًا عن العنصر، بينما تُسحبه القيمة السالبة إلى الداخل ليصبح أقرب إلى العنصر أو حتى داخله. تُستخدم عادةً مع الخاصية outline لتحسين التأثير المرئي.
| الفئة | |
|---|---|
| القيمة الأولية | 0 |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | length |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
outline-offset: <length>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | النوع | مسافة انزياح المخطط الخارجي |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline-offset | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： غالبًا ما تُستخدم الإزاحات الموجبة على الأزرار أو البطاقات لترك مساحة بين مخطط التركيز والعنصر، مما يجعله أوضح بصريًا.
❓ الأسئلة الشائعة
Qهل يؤثر outline-offset على التخطيط؟
Aلا. مثل الخاصية outline، لا يشغل outline-offset أي مساحة في التخطيط ولا يؤثر على حجم العنصر أو تدفق المستند. حتى القيمة السالبة التي تسحب المخطط الخارجي إلى داخل العنصر لا تُغيّر ترتيب المحتوى. هو فقط يغير المسافة بين المخطط الخارجي وحافة الحدود — القيمة الموجبة تدفعه للخارج والسالبة تسحبه للداخل.
Qهل يقبل outline-offset القيم السالبة؟
Aنعم. القيم السالبة تسحب المخطط الخارجي إلى الداخل، بل وحتى داخل العنصر؛ فمثلًا outline-offset: -3px; تجعل مخطط التركيز يلتصق بالحافة الداخلية للزر. إذا دفع الإزاحة المخطط الخارجي خارج إطار العرض (viewport)، فلن يضيف المتصفح أشرطة تمرير؛ يُقتَطَع الجزء الخارج عن الحدود ببساطة. يؤدي مزج إزاحات موجبة وسالبة إلى إنشاء أنماط تركيز جميلة من نوع "inset" (محفور).
Qكيف أنشئ تأثير خط مزدوج باستخدام outline والإزاحة؟
Aادمج الخاصية outline مع border: حدًا خارجيًا border: 2px solid #333; ومخططًا خارجيًا داخليًا outline: 2px solid #fff; مع outline-offset: -6px;. وبما أن لا أحد منهما يؤثر على التخطيط، فإن الخطين يتراكبان ليكونا زخرفة خط مزدوج، تُستخدم عادةً على البطاقات والأزرار وإطارات الصور — وأنظف من تداخل عناصر div إضافية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
