حول هذه الأداة
يرسم box-shadow في CSS ظلًّا واحدًا أو أكثر حول إطار العنصر. كل ظل مجموعة من القيم: كلمة inset اختيارية، وإزاحتان أفقية ورأسية، ونصف قطر تمويه، ونصف قطر انتشار، ولون. وتُفصل الظلال المتعددة بفواصل وتُرسم من الخلف إلى الأمام، فيجلس أولها في القائمة في الأعلى. وتكديس عدة ظلال منخفضة الشفافية هو الطريقة التي تُبنى بها الارتفاعات الواقعية والضوء المحيط الناعم والوهج الداخلي — فنادرًا ما يبدو ظلٌّ واحد طبيعيًا.
استخدمه لتصميم ارتفاع البطاقات والنوافذ المنبثقة، ولضبط تأثيرات حلقة التركيز والوهج الداخلي، ولإعادة إنشاء العمق على طراز Material بطبقات مكدّسة، أو لنمذجة حالة تمرير المؤشر بسرعة قبل اعتمادها في صفحة أنماطك. اختر إعدادًا مسبقًا للبدء، واضبط منزلقات كل طبقة، وفعّل inset للظلال الغائرة، والصق القاعدة المُولَّدة مباشرةً في الـ CSS الخاص بك أو في قيمة Tailwind اعتباطية.
تُصدَر الألوان على هيئة rgba() كي يرتبط منزلق الشفافية مباشرةً بقناة ألفا — وتبقى قيمة hex الأساسية دون مساس، مما يُبقي القيمة سهلة التعديل يدويًا لاحقًا.
الأسئلة الشائعة
كيف أنشئ ظل box-shadow طبقيًا (متعدد الطبقات)؟
وفّر عدة تعريفات ظل مفصولة بفواصل في تصريح box-shadow واحد. تُعرَض كل طبقة على نحو مستقل وتتكدّس من الخلف إلى الأمام، مع رسم أول ظل مذكور في الأعلى؛ ودمج بضع طبقات منخفضة الشفافية يُنتج عمقًا أنعم وأكثر واقعية من ظلٍّ واحد.
ما الفرق بين التمويه والانتشار في box-shadow؟
التمويه هو القيمة الرابعة ويتحكّم في مدى نعومة حافة الظل — فالقيم الأعلى تنشرها وتُلطّفها. أما الانتشار فهو القيمة الخامسة الاختيارية ويُكبّر (بالموجب) أو يُصغّر (بالسالب) حجم الظل قبل تطبيق التمويه، فالانتشار السالب يشدّ الظل نحو العنصر.
ماذا تفعل كلمة inset في box-shadow؟
تؤدي إضافة inset إلى رسم الظل داخل صندوق العنصر بدلًا من خارجه، مما يخلق تأثيرًا غائرًا أو وهجًا داخليًا. وبدون inset، يُرسم الظل إلى الخارج بوصفه ظلًّا مُسقطًا عاديًا.