دالة CSS drop-shadow()

التعريف والاستخدام

CSS drop-shadow() وظيفة المرشح تطبيق تأثير الظل على الصور.

مثال

مثال 1

إضافة تأثيرات مختلفة من الظل إلى الصور:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

تجربة شخصية

مثال 2

إضافة تأثيرات مختلفة من الظل إلى الصور (استخدام القيم السلبية للأفقية والعمودية):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

تجربة شخصية

اللغة CSS

drop-shadow(h-shadow v-shadow blur spread color)
القيمة الوصف
h-shadow

مطلوب. تحديد قيمة الظل الأفقية بالبكسل.

القيم السلبية تضع الظل في يسار الصورة.
v-shadow

مطلوب. تحديد قيمة الظل العمودية بالبكسل.

القيم السلبية تضع الظل في أعلى الصورة.
blur

اختياري. إضافة تأثير تلاطم للظل، وحدة القياس هي البكسل.

كلما زادت القيمة، كلما زادت قوة التلاطم (سيكون الظل أكبر وأرق).

لا يسمح بالقيم السلبية.

إذا لم يتم تحديد القيمة، فإن القيمة الافتراضية هي 0 (حافة الظل واضحة).
spread

اختياري. يجب أن تكون القيمة في وحدات البكسل.

القيم الإيجابية تجعل الظل ينتشر ويكبر، بينما القيم السلبية تجعل الظل يتنكمش.

إذا لم يتم تحديد، فإن القيمة الافتراضية هي 0 (الظل نفس حجم العنصر).
color

اختياري. إضافة لون للظل.

إذا لم يتم تحديد، فإن اللون يعتمد على المتصفح (عادةً الأسود).

تفاصيل التقنية

الإصدار: CSS Filter Effects Module Level 1

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الدالة بشكل كامل أولاً.

كروم إدج فايرفوكس سفاري أوبرا
18 12 35 6 15

الصفحات ذات الصلة

المرجع:خصائص filter لـ CSS

المرجع:دالة CSS blur()

المرجع:دالة CSS brightness()

المرجع:دالة CSS contrast()

المرجع:دالة CSS grayscale()

المرجع:دالة CSS hue-rotate()

المرجع:دالة CSS invert()

المرجع:دالة CSS opacity()

المرجع:دالة saturate CSS

المرجع:دالة sepia CSS