CSS box-shadow هدية
- الصفحة السابقة box-reflect
- Ɗauka shafuɗi box-sizing
التعريف والاستخدام
يضيف خاصية boxShadow ظلاً واحداً أو أكثر إلى الحاوية.
نصيحة:استخدم خصائص border-image-* لإنشاء أزرار قابلة للتمدد جميلة!
انظر أيضًا:
دليل CSS3:CSS3 ƙirar
دليل HTML DOM:خصائص boxShadow
مثال
إضافة box-shadow إلى عنصر div:
div
{
box-shadow: 10px 10px 5px #888888;
}
هناك أمثلة أكثر في أسفل الصفحة.
اللغة البرمجية CSS
box-shadow: h-shadow v-shadow البلل التمدد اللون inset;
التعليق:box-shadow تضيف ظلاً واحداً أو أكثر إلى الحاوية. هذا الخصائص هي قائمة من الظلال المفصولة بالكوماس، ويحدد كل ظل بثلاثة إلى أربعة قيم طول، وألوان اختيارية وقيمة inset اختيارية. القيم المتبقية هي صفر.
قيمة الخاصية
| القيمة | الوصف | الاختبار |
|---|---|---|
| h-shadow | مطلوب. موقع الظل أفقياً. يسمح بالقيم السلبية. | الاختبار |
| v-shadow | مطلوب. موقع الظل عموديًا. يسمح بالقيم السلبية. | الاختبار |
| البلل | اختياري. مسافة البلبلة. | الاختبار |
| التمدد | اختياري. حجم الظل. | الاختبار |
| اللون | اختياري. لون الظل. انظر إلى قيم الألوان في 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 |
- الصفحة السابقة box-reflect
- Ɗauka shafuɗi box-sizing
