خاصية ظل الصندوق
آخر تحديث: 2026-09-13
box-shadow خاصية ظل الصندوق
تضيف خاصية box-shadow طبقة واحدة أو أكثر من الظلال حول أو داخل صندوق حدود العنصر، مما يمنح العنصر عمقًا وتدرّجًا هرميًا على الصفحة. وهي خاصية أساسية لتأثيرات واجهة المستخدم الحديثة مثل البطاقات العائمة والأزرار المضغوطة، وتدعم الإزاحة ونصف قطر التمويه ونصف قطر الانتشار واللون.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
box-shadow: none | <shadow>#;
/* <shadow> = inset? && <length>{2,4} && <color>? */⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون ظل للصندوق |
<shadow># | النوع | قائمة ظلال: inset؟ أفقي رأسي تمويه انتشار لون |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v5.1 | ✓ v10.5 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： قيمتا الطول الأوليان (الإزاحة الأفقية والرأسية) مطلوبتان. تكون قيمة نصف قطر التمويه ونصف قطر الانتشار افتراضيًا 0، واللون افتراضيًا هو لون نص العنصر الحالي.
تلميح： ترسم الكلمة المفتاحية inset الظل داخل العنصر، وتُستخدم عادةً للحالات المضغوطة أو الغائرة.
❓ الأسئلة الشائعة
Qما الفرق بين box-shadow و text-shadow في CSS؟
Aيُطبَّق box-shadow على نموذج الصندوق بالكامل: يتبع الظل مخطط صندوق حدود العنصر (بما في ذلك border-radius)، مما يُنتج ظلًا مرميًا مستطيلًا أو مستطيلًا بزوايا دائرية. أما text-shadow فلا يُطبَّق إلا على النص نفسه، مُسقطًا ظلًا على حروفه. صياغتهما متشابهة — إزاحة وتمويه ولون — لكن الكائن المتأثر وطريقة تكديسهما مختلفة تمامًا.
Qكيف أكتب طبقات متعددة من box-shadow على عنصر واحد؟
Aافصل مجموعات الظلال المتعددة بفواصل؛ تُرسم المجموعة الأولى في الأعلى. على سبيل المثال، box-shadow: 0 2px 4px #000, 0 8px 16px #333; ترسم الطبقة الأولى ثم تكدّس الطبقة الثانية فوقها. غالبًا ما تُستخدم الظلال المتعددة لمحاكاة تلاشي ظل حقيقي أو لدمج تأثيرات التوهج والحدود — كلما زاد عدد الطبقات، اقتربنا من الإضاءة الواقعية.
Qهل يمكن تحريك box-shadow ولماذا يتلعثم تحريكه؟
Aيدعم box-shadow الانتقالات والرسوم المتحركة، لكن تحريكه يُطلق إعادة الرسم ويمكن أن يتلعثم على الأجهزة منخفضة الأداء. للتحسين: بدّل قيمة الظل عند التمرير (hover) فقط بدل تحريك العنصر بالكامل؛ استخدم عنصرًا زائفًا يحمل الظل وأخفِه تدريجيًا عبر transition: opacity؛ أو، في الحالات الحرجة، استخدم filter: drop-shadow(). اختبر دائمًا على الأجهزة المستهدفة.
Qكيف أنشئ box-shadow بتأثير inset لتأثير غائر أو مضغوط؟
Aضع الكلمة المفتاحية inset في بداية قيمة الظل تمامًا فيُسقط الظل داخل العنصر — على سبيل المثال، box-shadow: inset 0 2px 8px rgba(0,0,0,0.3). تُستخدم ظلال inset عادةً للأزرار المضغوطة وحقول الإدخال الغائرة. يمكن فصل ظلال inset المتعددة بفواصل ودمجها في مظهر غائر ثلاثي الأبعاد.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
