Определение box-reflect
CSS свойство box-reflect используется для создания отражения элемента.
Значение CSS свойство box-reflect может быть: below, above, left, или right.
Примечание: CSS свойство box-reflect является нестандартным и должно быть записано с помощью префикса -webkit-.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.webkitBoxReflect="below" Попробуй |
Поддержка box-reflect
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | Не поддерживается | 4.0 -webkit- | 15.0 -webkit- |
Синтаксис box-reflect
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
Значения box-reflect
| Значение свойства | Описание | Демонстрация |
|---|---|---|
| none | Значение по умолчанию. Отражение не отображается. | Демо ❯ |
| below | Создает отражение под элементом. | Демо ❯ |
| above | Создает отражение над элементом. | Демо ❯ |
| left | Создает отражение слева от элемента. | Демо ❯ |
| right | Создает отражение справа от элемента. | Демо ❯ |
| position offset | Синтаксис с двумя значениями: - position устанавливает отражение ниже, над, слева или справа от элемента. - offset устанавливает расстояние до отражения. Расстояние Определяется в пикселях, pt, см и т.д. Значение по умолчанию равно 0. Читайте о единицы измерения длины |
Демо ❯ |
| position offset gradient | Синтаксис с тремя значениями: - position устанавливает отражение ниже, над, слева или справа от элемента. - offset устанавливает расстояние до отражения. Расстояние Определяется в пикселях, pt, см и т.д. Значение по умолчанию равно 0. Читайте о единицы измерения длины - gradient устанавливает переход для отражения, т.е. эффект затухания. |
Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры box-reflect
CSS свойство box-reflect может быть установлено для любого видимого HTML-элемента. Здесь отражение выполняется под p-тегом:
p {
-webkit-box-reflect: below;
}
Попробуйте сами »
CSS свойство box-reflect значение может быть задано с помощью синтаксиса с двумя значениями. Здесь отражение находится ниже img-элемента, но на расстоянии 70 пикселей:
img {
-webkit-box-reflect: below 70px;
}
Попробуйте сами »
CSS свойство box-reflect значение также может быть задано с помощью синтаксиса с тремя значениями. Здесь отражение находится под элементом img на расстоянии 10 пикселей и постепенно исчезает:
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
Попробуйте сами »
Страницы по теме box-reflect
CSS Учебник: CSS Отражение изображения