خاصية boxShadow Style
- مثل الصفحة السابقة مثل bottom
- مثل الصفحة التالية مثل boxSizing
- مثل العودة إلى الطبقة العليا موضوع Style في HTML DOM
التعريف والاستخدام
boxShadow يحدد الخاصية إعدادًا أو استردادًا للظل (drop-shadow) للعنصر الصندوق.
يرجى الرجوع أيضًا إلى:
دليل CSSbox-shadow الخاصية
مثال
إضافة box-shadow إلى العنصر div:
document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";
النحو
استرداد الخاصية boxShadow:
object.style.boxShadow
تعيين الخاصية boxShadow:
object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"
ملاحظة:boxShadow يضيف الخاصية box-shadow إلى الصندوق إما واحدة أو أكثر من الظلال. يتم تحديد كل ظل من قائمة الظلال المفصولة بالكومات، ويحدد كل ظل بـ 2-4 قيم طول، ويمكن أن يحتوي على لون اختياري وأختيار inset اختياري. تكون القيم المفقودة صفرًا.
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| none | القيمة الافتراضية. لا يظهر الظل. |
| h-shadow | مطلوب. موقع الظل الأفقي. يسمح بالقيم السلبية. |
| v-shadow | مطلوب. موقع الظل العمودي. يسمح بالقيم السلبية. |
| blur | اختياري. مسافة الغموض. |
| spread | اختياري. حجم الظل. |
| color |
اختياري. لون الظل. القيمة الافتراضية هي السواد. يرجى الرجوع إلى قيم الألوان CSS، للحصول على قائمة كاملة بالألوان المحتملة. نصيحة:في Safari (على الكمبيوتر)،color المعلمة ضرورية. إذا لم تُحدد اللون، فإن الظل لن يُظهر أبدًا. |
| inset | اختياري. قم بتغيير الظل الخارجي (outset) إلى الظل الداخلي. |
| initial | أعد هذا الخاصية إلى قيمتها الافتراضية. يرجى الرجوع إلى initial. |
| inherit | يرث هذا الخاصية من العنصر الأم. يرجى الرجوع إلى inherit. |
تفاصيل التقنية
| القيمة الافتراضية: | لا شيء |
|---|---|
| القيمة المعدلة: | الخط النصي، يمثل box-shadow الخاصية. |
| مثل إصدار CSS: | مثل CSS3 |
مثل دعم المتصفح
| مثل Chrome | مثل Edge | مثل Firefox | مثل Safari | مثل Opera |
|---|---|---|---|---|
| مثل Chrome | مثل Edge | مثل Firefox | مثل Safari | مثل Opera |
| مثل الدعم | مثل 9.0 | مثل الدعم | مثل 5.1 | مثل الدعم |
- مثل الصفحة السابقة مثل bottom
- مثل الصفحة التالية مثل boxSizing
- مثل العودة إلى الطبقة العليا موضوع Style في HTML DOM
