طريقة الاستخدام
box-shadow: [inset] x y blur spread color;- الإزاحة x وy: موضع الظل؛ القيم الموجبة لليمين وللأسفل.
- التمويه: كلما زاد كان الظل أنعم.
- الانتشار: يكبّر الظل أو يصغّره؛ القيمة السالبة تعطي ظلاً أنيقاً تحت العنصر.
- الظل الناعم: يجمع أربع طبقات متدرجة فيبدو أقرب للظل الحقيقي.
مثال عملي
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) ظل بطاقة خفيف شائع في الواجهات.
أسئلة شائعة
هل الظلال الكثيرة تبطئ الموقع؟
الظلال الكبيرة جداً على عناصر كثيرة متحركة قد تؤثر على الأداء؛ استعملها باعتدال.
كيف أضع أكثر من ظل؟
افصل بينها بفاصلة، كما يفعل خيار «الظل الناعم».
ما الفرق بين box-shadow وtext-shadow؟
الأول لإطار العنصر، والثاني لحروف النص ولا يدعم الانتشار ولا الظل الداخلي.