ویژگی box-reflect CSS

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

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

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

  • below(پایین)
  • above(بالای)
  • left(طرف چپ)
  • right(طرف راست)

توجه داشته باشید:box-reflect این ویژگی یک ویژگی غیر استاندارد است و باید از آن استفاده شود -webkit- پیشوند.

مثال

مثال 1

افزودن اثر Refleکت در پایین تصویر:

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

آزمایش کنید

مثال 2

box-reflect این ویژگی می‌تواند بر روی هر عنصر قابل دیدن HTML اعمال شود. مثال زیر اثر Refleکت را در پایین برچسب <p> ایجاد می‌کند:

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

آزمایش کنید

مثال 3

box-reflect این ویژگی می‌تواند با قوانین دوگانه استفاده شود. مثال زیر اثر Refleکت را در پایین تصویر ایجاد می‌کند و فاصله 70px را تنظیم می‌کند:

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

آزمایش کنید

مثال 4

box-reflect این ویژگی می‌تواند با قوانین سه‌گانه استفاده شود. مثال زیر اثر Refleکت را در پایین تصویر ایجاد می‌کند، فاصله 10px را تنظیم می‌کند و به تدریج محو می‌شود:

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

آزمایش کنید

قوانین CSS

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

مقدار ویژگی

مقدار توضیح
none مقدار پیش‌فرض. اثر Refleکت نمایش داده نمی‌شود.
below اثر Refleکت را در سمت پایین عناصر ایجاد می‌کند.
above اثر Refleکت را در سمت بالا عناصر ایجاد می‌کند.
left اثر Refleکت را در سمت چپ عناصر ایجاد می‌کند.
right اثر Refleکت را در سمت راست عناصر ایجاد می‌کند.
position offset

قوانین دوگانه:

  • position تنظیم موقعیت refleکت (below، above، left یا right).
  • offset تنظیم فاصله refleکت. فاصله می‌تواند با واحد‌های px، pt، cm و غیره استفاده شود. مقدار پیش‌فرض 0 است.
position offset gradient

قوانین سه‌گانه:

  • position تنظیم موقعیت refleکت (below، above، left یا right).
  • offset تنظیم فاصله refleکت. فاصله می‌تواند با واحد‌های px، pt، cm و غیره استفاده شود. مقدار پیش‌فرض 0 است.
  • gradient تنظیم اثر گذارنمای refleکت، مثلاً افاده.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit این ویژگی از ویژگی پدر خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض: none
وراثت: خیر
انیمیشن‌سازی: نپشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
قوانین نوشتاری JavaScript: object.style.webkitBoxReflect="below"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای اولین هستند که این ویژگی را کامل پشتیبانی می‌کنند.

اعداد با پیشوند -webkit- نشان‌دهنده نسخه‌ای اولین هستند که از این پیشوند پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- نپشتیبانی می‌شود 4.0 -webkit- 15.0 -webkit-