Отражение изображения CSS

В этой главе вы узнаете, как отразить изображение.

CSS отражения изображений

Свойство box-reflectиспользуется для создания отражения изображения.

Значение box-reflectсвойства может быть: below, above, leftили right.

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

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

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

Здесь нам нужно отражение под изображением:

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

Здесь нам нужно отражение справа от изображения:

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

Чтобы указать зазор между изображением и отражением, добавьте к box-reflectсвойству размер зазора.

Здесь нам нужно отражение под изображением со смещением 20px:

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

Мы также можем создать эффект затухания на отражении.

Создайте эффект затухания на отражении:

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