مولد ظل الصندوق CSS

أنشئ قيم CSS box-shadow متعددة الطبقات مع معاينة مباشرة وخيار inset وعناصر تحكم دقيقة.

الطبقات1
أنشئ قيم CSS box-shadow متعددة الطبقات مع معاينة مباشرة وخيار inset وعناصر تحكم دقيقة.
إعدادات الطبقة
الطبقة 1
px
px
px
px
معاينة
انسخ قيمة box-shadow إلى CSS.
box-shadow
مخرجات CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

ما هي box-shadow؟

أنشئ قيم CSS box-shadow متعددة الطبقات مع معاينة مباشرة وخيار inset وعناصر تحكم دقيقة.

box-shadow هي خاصية CSS ترسم ظلًا واحدًا أو أكثر خلف العنصر (أو بداخله).

كل ظل يستخدم إزاحة أفقية وعمودية ونصف قطر تمويه وانتشارًا اختياريًا ولونًا مع ألفا؛ أضف inset لتحويله إلى ظل داخلي.

تُفصل الطبقات المتعددة بفواصل، مما يسمح بتكديس ظلال دقيقة لبناء العمق أو التوهج أو الحواف الحادة.

  • استخدم إزاحات صغيرة مع تمويه أكبر لارتفاع ناعم.
  • استخدم عتامة أعلى مع تمويه صغير لحواف أكثر حدة.
  • اجمع بين ظل خارجي وظل داخلي لإضافة عمق.
  • قلّل عدد الطبقات لتحسين الأداء.