فنك 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

دعم المتصفح

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

صفحات مرتبطة

Hausa translation of References:CSS filter属性

Hausa translation of References:فنك CSS blur()

Hausa translation of References:فنك CSS brightness()

Hausa translation of References:فنك CSS contrast()

Hausa translation of References:فنك CSS grayscale()

Hausa translation of References:فنك CSS hue-rotate()

Hausa translation of References:فنك CSS invert()

Hausa translation of References:فنك CSS opacity()

Hausa translation of References:Hausa translation of CSS saturate() function

Hausa translation of References:Hausa translation of CSS sepia() function