انتقل إلى محتوى الدرس

Box Shadow Versus Border Model علاقة الظل بالصندوق وحدود النافذة

صمم عمقاً بصرياً واقعياً للبطاقات والأزرار عبر ظلال الصناديق في لغة CSS باستخدام الإزاحة والتمويه ونصف قطر الانتشار والظلال الغائرة وحلقات التركيز الدائرية دون التأثير في التخطيط.
3 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

على خلاف الإطار border الذي يدخل ضمن حساب أبعاد الصندوق الفيزيائية، يُعد ظل الصندوق تأثيراً مرسوماً خالصاً خارج حسابات التخطيط؛ فإضافة ظل بعرض 30px أو إلغاؤه بالقيمة none لا يدفع البطاقات المجاورة ولا يغير عرض العنصر إطلاقاً. ومع ذلك، احرص على منح الحاوية الأب حشوة داخلية كافية عبر padding كي لا ينبتر الظل الممتد عند حدود حاوية تحمل overflow: hidden.

الصف 2 معاينة حية

مختبر ظلال الصناديق التفاعلي

الصف 3 ملاحظة هامة