استخدام خاصية box-shadow في CSS3 ومثال

يطبق خاصية box-shadow CSS على حاوية العنصر ويطبق على واحد أو أكثر من تأثيرات الظل.

الجدول أدناه يوضح استخدام هذه الخاصية وتاريخ إصداراتها، بالإضافة إلى صيغة استخدامها في سكربتات الجافا سكريبت.

صيغة استخدام box-shadow

تكون صيغة هذا الخصوصية كالتالي:

box-shadow: [ , , ... shadowN] | none | initial | inherit
　　　　　　　حيث الظل هو: [ inset [ offset-x offset-y radius-blur radius-spread color ] ]

يُظهر هذا المثال كيفية استخدام خاصية box-shadow.

.shadow{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow: 2px 2px 4px 2px #999;
}

يمكنك استخدام كلمة المفتاح inset لتطبيق الظل داخل حاوية العنصر. يُرسم الظل داخل الحاوية، فوق الخلفية ولكن تحت المحتوى.

.shadow-inside{
　　　　width:　150px;
　　　　height:　150px;
　　　　background:　#ccc;
　　　　border:　1px　solid　#999;
　　　　box-shadow:　inset　0　0　6px　2px　#999;
}

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

تطابق المتصفحات

تطابق متصفحات box-shadow الخاص بالخصائص، الأرقام في الجدول التالي تمثل أحدث إصدار من المتصفحات التي تدعم هذه الخاصية؛ جميع المتصفحات الشائعة يدعمون هذه الخاصية.

قراءة إضافية

انظر إلى التعليمات التالية:شadows CSS3,عناصر وهمية CSS.

خصائص مرتبطة:text-shadow.