CSS box-reflect پراویتی

تعریف و استفاده

box-reflect این خصوصیت برای ایجاد تأثیر انعکاس روی عناصر استفاده می‌شود.

box-reflect مقدار این خصوصیت می‌تواند باشد:

• بلیو(پایین)
• ابور(بالای)
• لیفت(راست)
• رائٹ(چپ)

توجه:box-reflect خصوصیت غیراستاندارد است، باید از -webkit- پیشوند.

مثال

مثال 1

تصویر کی نیچل رکشا میں شامل کریئے:

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

خود سے کوشش کریئے

مثال 2

box-reflect اس خاصیت کو کسی بھی دیکھیئے والی ایچ تی وی عنصر پر استعمال کیاجاسکتاہے. مثال میں، <p> کے نیچل رکشا کو پیدا کرنے کے لئے.

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

خود سے کوشش کریئے

مثال 3

box-reflect اس خاصیت کو دو قیمتی زبان کا استعمال کیاجاسکتاہے. مثال میں، تصویر کی نیچل رکشا کو پیدا کرنے کے لئے، 70px کی دوری پر سیٹ کیاگیا.

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

خود سے کوشش کریئے

مثال 4

box-reflect اس خاصیت کو تین قیمتی زبان کا استعمال کیاجاسکتاہے. مثال میں، تصویر کی نیچل رکشا کو پیدا کرنے کے لئے، 10px کی دوری پر سیٹ کیاگیا، اور تار کا اثر دیکھنے کے لئے.

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

خود سے کوشش کریئے

سی ایس ایس زبان:

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

خصوصیت کی قیمتی

تکنیکی تفصیلات

براوزر کی حمایت

جداول میں نمبر، پہلے پورا طور پر اس کی حمایت کرنے والی براوزر کی نسلی کا شماراوت کردیاگرتیا.

عدد کا -webkit- پرافیکس، پہلے اس پرسرمایلی کا شماراوت کردیاگرتیا.