خصائص ظل الصندوق

التعريف والاستخدام

يضيف خصائص box-shadow ظلاً واحداً أو أكثر إلى الحاوية.

نصيحة:استخدم خصائص border-image-* لإنشاء أزرار قابلة للتمدد جميلة!

انظر أيضًا:

دليل CSS3حواف CSS3

دليل HTML DOMخصائص boxShadow

مثال

أضف box-shadow إلى عنصر div:

div
{
box-shadow: 10px 10px 5px #888888;
}

جرب بنفسك

هناك أمثلة أكثر في قاعدة البيانات.

جملة CSS

box-shadow: ظل أفقي ظل عمودي غموض انتشار لون داخلي;

ملاحظة:يضيف box-shadow ظلاً واحداً أو أكثر إلى الحاوية. يعتمد هذا الخصائص على قائمة الظل المفصولة بالكومات، ويحدد كل ظل بثلاثة إلى أربعة قيم طول، ويمكن أن يشمل لونًا اختياريًا وأي كلمة مفتاحية inset اختيارية. القيم المفقودة هي 0.

قيمة الخاصية

القيمة الوصف الاختبار
ظل أفقي مطلوب. موقع الظل الأفقي. يسمح بالقيم السلبية. الاختبار
ظل عمودي مطلوب. موقع الظل العمودي. يسمح بالقيم السلبية. الاختبار
غموض اختياري. مسافة الغموض. الاختبار
انتشار اختياري. حجم الظل. الاختبار
لون اختياري. لون الظل. انظر إلى قيم الألوان في CSS. الاختبار
داخلي اختياري. قم بتغيير الظل الخارجي (outset) إلى الظل الداخلي. الاختبار

تفاصيل التقنية

القيمة الافتراضية: لا شيء
الوراثة: لا
الإصدار: CSS3
جافا سكريبت الجملة: عنصر.style.boxShadow="10px 10px 5px #888888"

مزيد من الأمثلة

صورة رميها على الطاولة
هذا المثال يوضح كيفية إنشاء صورة بولارويد وتدوير الصورة.

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم الخاصية بشكل كامل.

الرقم -webkit- أو -moz- يشير إلى إصدار الإصلاح الأول الذي يستخدم البادئة.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5