CSS انعكاس الصندوق الخاصية

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

box-reflect تستخدم الخاصية لإنشاء تأثير انعكاس العنصر.

box-reflect قيمة الخاصية يمكن أن تكون:

  • belowالسفلي
  • aboveالعمود
  • leftاليمين
  • rightاليسار

الاحتياطات:box-reflect خصائص غير معايير، يجب استخدامها -webkit- الاسم المقدر.

مثال

مثال 1

إضافة تأثير انعكاس تحت الصورة:

img {
  -webkit-box-reflect: below;
}

تجربة شخصية

مثال 2

box-reflect يمكن تطبيق الخاصية على أي عنصر HTML مرئي. في المثال التالي، يتم إنشاء تأثير انعكاس تحت علامة <p>.

p {
  -webkit-box-reflect: below;
}

تجربة شخصية

مثال 3

box-reflect يمكن استخدام syntax المزدوج. في المثال التالي، يتم إنشاء تأثير انعكاس تحت الصورة، مع إعداد المسافة إلى 70px.

img {
  -webkit-box-reflect: below 70px;
}

تجربة شخصية

مثال 4

box-reflect يمكن استخدام syntax الثلاثي أيضًا. في المثال التالي، يتم إنشاء تأثير انعكاس تحت الصورة، مع إعداد المسافة إلى 10px، ويعتمد على الظل.

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

تجربة شخصية

syntax CSS

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

قيمة الخاصية

القيمة الوصف
لا شيء القيمة الافتراضية. لا يظهر تأثير الإنعكاس.
below إنشاء تأثير انعكاس في أسفل العنصر.
above إنشاء تأثير انعكاس في أعلى العنصر.
left إنشاء تأثير انعكاس على الجانب الأيسر للعنصر.
right إنشاء تأثير انعكاس على الجانب الأيمن للعنصر.
position offset

syntax المزدوج:

  • position تعيين موقع الإنعكاس (below،above،left أو right).
  • offset تعيين المسافة للإنعكاس. يمكن استخدام وحدات مثل px،pt،cm،إلخ. القيمة الافتراضية هي 0.
position offset gradient

syntax الثلاثي:

  • position تعيين موقع الإنعكاس (below،above،left أو right).
  • offset تعيين المسافة للإنعكاس. يمكن استخدام وحدات مثل px،pt،cm،إلخ. القيمة الافتراضية هي 0.
  • gradient تعيين تأثير التحول للإنعكاس، مثل تأثير الظل.
القيمة الافتراضية يرجى الرجوع إلى القيمة الافتراضية.
التوريث يرجى الرجوع إلى التوريث.

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

القيمة الافتراضية: لا شيء
التوريث: لا
إنتاج الرسوم المتحركة: لا يدعم. انظر إلى:خصائص الرسوم المتحركة.
الإصدار: CSS3
جافا سكريبت syntax: object.style.webkitBoxReflect="below"

دعم المتصفح

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

الرقم الموجود أمام -webkit- يعني إصدار الدعم الأولي لهذا البادئة.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- لا يدعم 4.0 -webkit- 15.0 -webkit-