CSS свойство box-reflect

Определение и использование

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
JavaScript синтаксис: object.style.webkitBoxReflect="below"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксом -webkit- указывают на первую версию браузера, поддерживающую этот префикс.

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- не поддерживается 4.0 -webkit- 15.0 -webkit-