مركز المعرفة والمفاهيم
إنشاء ظلال CSS المتعددة الطبقات (Box-Shadow)
إنشاء ظلال CSS المتعددة الطبقات (Box-Shadow)
تعمل هذه الأداة محلياً بالكامل داخل المتصفح (Client-Side). لا يتم إرسال أكوادك أو بياناتك الحساسة إلى أي خادم خارجي.
البنية الأساسية والصيغة الرياضية
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
You can stack multiple shadows on a single element by separating them with commas, which is essential for creating hyper realistic, diffuse ambient lighting.
أفضل الممارسات والإرشادات الأساسية
- Layer Multiple Subtle Shadows: A single harsh black shadow looks cheap and dated. Professional UI design uses a tight, dark shadow for immediate depth, combined with a large, highly transparent shadow for ambient light dispersion.
- Use RGBA for Transparency: Never use solid hex colors for shadows. Always use RGBA or HSLA with a very low alpha channel (e.g., 0.05 to 0.15) so the shadow realistically blends with whatever background color sits behind it.
- Match Real World Lighting: In the real world, light usually comes from above. Therefore, your Y Offset should almost always be positive (pushing the shadow down), while the X Offset remains close to zero.
الأسئلة الشائعة (FAQ)
What does the Spread Radius do?
The spread radius expands or contracts the physical footprint of the shadow before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread pulls it inward (great for floating elements).
How do I create an inner shadow?
Append the keyword `inset` to the end of the CSS rule. This reverses the shadow, making it render inside the bounding box, creating an indented, debossed, or 'pressed in' neumorphic effect.
Do box shadows cause performance issues?
Yes. Animating box shadows (like a hover effect) forces the browser to constantly repaint the pixels, which can cause lag on cheap mobile devices. It is often more performant to animate the `opacity` of a pseudo element containing the shadow.