CSS3 Отражение изображения
В этой главе вы узнаете, как отразить изображение.
CSS Отражение изображения
Свойство box-reflect используется для создания отражения изображения.
Значение свойства box-reflect может быть: below, above, left , или right.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Не поддерживается | 4.0 -webkit- | 15.0 -webkit- |
Примеры
Пример
Создайте, чтобы отражение находилось под изображением:
img {
-webkit-box-reflect: below;
}
Попробуйте сами »
Пример
Создайте, чтобы отражение находилось справа от изображения:
img {
-webkit-box-reflect: right;
}
Попробуйте сами »
CSS Смещение отражения
Чтобы указать зазор между изображением и отражением, добавьте размер зазора в свойство box-reflect.
Пример
Здесь мы хотим, чтобы отражение находилось под изображением со смещением в 20 пикселей:
img {
-webkit-box-reflect: below 20px;
}
Попробуйте сами »
CSS Отражение с градиентом
Мы также можем создать эффект затухания на отражении.
Пример
Создайте эффект затухания на отражении:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}
Попробуйте сами »