CSS Box Shadow

خصائص box-shadow CSS

CSS box-shadow تطبيق السحابة على العنصر.

أبسط الاستخدام هو تحديد الظل الأفقي والظل العمودي فقط:

عنصر <div> الأصفر، يحتوي على box-shadow باللون الأسود

مثال

div {
  box-shadow: 10px 10px;
}

تجربة شخصية

الآن، أضف لونًا إلى الظل:

عنصر <div> الأصفر، يحتوي على box-shadow باللون الرمادي

مثال

div {
  box-shadow: 10px 10px silver;
}

تجربة شخصية

الآن، أضف تأثير الحجب المبهم إلى الظل:

عنصر <div> الأصفر، يحتوي على box-shadow مبهم

مثال

div {
  box-shadow: 10px 10px 5px silver;
}

تجربة شخصية

بطاقة

يمكنك أيضًا استخدام box-shadow تأثير إنشاء بطاقات ورقية:

1
1 يناير 2021
كوفي
كوفي

مثال

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

تجربة شخصية: بطاقة ورقيةتجربة شخصية: بطاقة صورة

خصائص الظل CSS

الجدول أدناه يبين خصائص الظل في CSS:

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