أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
الخاصية مربع الظل وتعلق واحد أو أكثر من الظلال إلى عنصر.
| القيمة الافتراضية: | none |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.boxShadow="10px 20px 30px blue" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- أو -moz- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | تسعة | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
CSS بناء الجملة
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; Note: الخاصية مربع الظل وتعلق واحد أو أكثر من الظلال إلى عنصر. فإن المنشأة هي قائمة مفصولة بفواصل من الظلال، وتحديد كل 2-4 قيم الطول ولون اختياري، وأقحم الكلمة اختيارية. أطوال حذفت هي 0.
قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| none | القيمة الافتراضية. يتم عرض لا ظل | العبها " |
| h-shadow | مطلوب. موقف الظل الأفقي. يسمح القيم السلبية | العبها " |
| v-shadow | مطلوب. موقف الظل الرأسي. يسمح القيم السلبية | العبها " |
| blur | اختياري. المسافة طمس | العبها " |
| spread | اختياري. حجم الظل. يسمح القيم السلبية | العبها " |
| color | اختياري. لون الظل. القيمة الافتراضية هي سوداء. انظروا إلى قيم اللون CSS للحصول على قائمة كاملة من القيم الألوان الممكنة. ملاحظة: في سفاري (on PC) مطلوب معلمة اللون. إذا لم تقم بتحديد لون، لا يتم عرض الظل على الإطلاق. | العبها " |
| inset | اختياري. يغير الظل من الظل الخارجي (outset) إلى الظل الداخلي | العبها " |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
صور القيت على الطاولة
يوضح هذا المثال كيفية إنشاء "polaroid" الصور وتدوير الصور.
صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 حدود
HTML DOM المرجع boxShadow property