خاصية الإطار الخارجي
آخر تحديث: 2026-09-13
outline خاصية الإطار الخارجي
يرسم outline خطاً حول العنصر خارج حدوده، ويُستخدم أساساً للإشارة إلى حالة التركيز. على عكس border، لا يشغل outline مساحة ولا يؤثر في حجم العنصر أو تخطيط الصفحة. إنها خاصية اختصار تضبط لون الإطار الخارجي ونمطه وعرضه دفعة واحدة.
| الفئة | |
|---|---|
| القيمة الأولية | medium none currentcolor |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
outline: <outline-color> || <outline-style> || <outline-width>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<outline-color> || <outline-style> || <outline-width> | القيمة | اختصار الإطار الخارجي (لا يشغل مساحة، يُستخدم لمؤشرات التركيز) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| outline | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v9 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
مهم： يُستخدم outline عادةً لمؤشرات التركيز من حيث إمكانية الوصول. تجنّب outline: none لإزالة نمط التركيز الافتراضي ما لم توفّر بديلاً واضحاً بنفس الدرجة.
❓ الأسئلة الشائعة
Qمتى يجب أن أستخدم outline بدلاً من border؟
Aاستخدم border عندما تشارك الخط في التخطيط وتكون جزءاً من نموذج الصندوق. استخدم outline للإشارات البصرية التي لا تشغل مساحة، خاصة حالات تركيز لوحة المفاتيح. يُرسم outline خارج الحد، ولا يؤثر في حجم العنصر، ويمكن إبعاده عن العنصر بـ outline-offset. لا تُزِل أنماط التركيز بـ outline: none — بل وفر بديلاً مخصصاً واضحاً.
Qهل يمكن تدوير outline؟
Aنعم. في المتصفحات الحديثة (Chrome 94+ وFirefox 88+ وSafari 16.4+)، يتبع outline قيمة border-radius الخاصة بالعنصر ويرسم زوايا مدوّرة؛ أما المتصفحات القديمة فترسمه مربعاً. إذا احتجت تحكماً دقيقاً في الشكل، محاكاة ذلك بـ box-shadow الذي يدعم الزوايا المدوّرة طبيعياً ولا يشغل مساحة أيضاً.
Qكيف أنشئ نمط تركيز مخصصاً جيد المظهر ليحل محل الـ outline الافتراضي؟
Aاستخدم اختصار outline مع outline-offset: outline: 2px solid #0078d4; outline-offset: 2px; يترك فجوة صغيرة بين الإطار الخارجي والعنصر. لا تُزِل مؤشرات التركيز بـ outline: none — فذلك يضر مستخدمي لوحة المفاتيح. إذا نفّذته بـ box-shadow بدلاً من ذلك، تأكد من كفاية التباين.
Qما الفرق بين outline وbox-shadow؟
Aoutline خط ذو نمط وعرض لا يشغل مساحة ويتبع الزوايا المدوّرة للعنصر في المتصفحات الحديثة. أما box-shadow فتخدع بخط باستخدام التمويه والانتشار (مثل box-shadow: 0 0 0 2px red;) وتدعم ظلالاً متعددة وتوهجاً وظلالاً داخلية. لا يؤثر أي منهما في التخطيط، لكن box-shadow لا يستطيع رسم خطوط متقطعة، لذا غالباً ما تُدمج الخاصيتان في أنماط التركيز.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
