CSS - Outline الاطار الخارجي
CSS - خصائص Outline (الإطار الخارجي)
🔸 تُستخدم خصائص outline في CSS لرسم إطار خارجي حول العناصر، يختلف عن border بأنه لا يؤثر على حجم العنصر ولا يشغل مساحة إضافية.
✅ الخاصية: outline
تُستخدم لتحديد كل من العرض واللون والنمط للإطار الخارجي في سطر واحد.
div {
outline: 2px solid red;
}
✅ الخاصية: outline-width
تُحدد عرض الإطار الخارجي ويمكن أن تكون قيمة عددية بوحدة مثل px أو كلمات مفتاحية مثل thin وmedium وthick.
div {
outline-width: 4px;
}
✅ الخاصية: outline-style
تُحدد نمط الخط للإطار، مثل:
solid: خط صلبdotted: منقطdashed: متقطعdouble: مزدوجnone: بدون إطار
div {
outline-style: dashed;
}
✅ الخاصية: outline-color
تُحدد لون الإطار الخارجي ويمكن استخدام اسم لون أو قيمة HEX أو RGB.
div {
outline-color: blue;
}
✅ الخاصية: outline-offset
تُحدد المسافة بين الإطار الخارجي وحدود العنصر.
div {
outline: 2px solid red;
outline-offset: 5px;
}
🧪 مثال شامل
div {
outline: 3px dotted green;
outline-offset: 10px;
}
💡 ملاحظات مهمة
- الإطار الخارجي لا يشغل مساحة ولا يغير في حجم العنصر.
- يمكن استخدام
outlineلتحسين الوصولية (accessibility) عند التركيز على العناصر. - بعض المتصفحات تُظهر outline افتراضيًا حول العناصر التي يتم التركيز عليها (مثلًا عند استخدام لوحة المفاتيح).
تعليقات
إرسال تعليق