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 این ویژگی می‌تواند با نوع دستور دوگانه استفاده شود. در مثال زیر، بازتاب را در پایین تصویر ایجاد می‌کند و فاصله 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));
}

آزمایش کنید

نوع دستور CSS

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

مقدار ویژگی

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

نوع دستور دوگانه:

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

نوع دستور سه‌گانه:

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

جزئیات فنی

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

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

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

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

کروم ایج فایرفاکس سافاری آپرا
4.0 -webkit- 79.0 -webkit- ناپسند 4.0 -webkit- 15.0 -webkit-